[HTML] 브라우저 렌더링 과정

 

일반적으로 브라우저가 서버로부터 페이지에 대한 응답을 받을경우 화면에 표시되기까지 많은 동작을 거쳐야한다.

여기서 브라우저가 HTML파일을 초기 화면에 표시하기 위한 이 순서를 CRP(Critical Rendering Path)라고 한다.

 

 

CRP는 다음과 같이 6단계의 순서로 실행된다.

 

브라우저 렌더링 과정

 

1. HTML파일을 파싱하여 각 HTML태그들을 오브젝트 노드로 변환하여 이를 기반으로 DOM트리를 구축한다.
   
   
2. CSS파일을 파싱하여 CSSOM(CSS Object Model) 구축한다.
   
   
3. javascript 실행한다. 여기서 HTML파싱 중 외부 파일과 연결된 script태그를 만나면 파싱을 중단하고 script 파일을 요청하고 다운로드 한다. 요청 한 파일이 다운로드가 완료되면 다시 다음 태그들을 파싱한다.
   (단, defer, async 와 같은옵션이 없다는 가정하에)
   
   
4. DOM트리와 CSSOM를 합하여 Render tree를 구축한다.
   ( display:none 속성은 실제로 브라우저 공간을 차지하지않고 표시되지않기 때문에 Render tree에서 제외된다.)
   단, opacity:0 , visibility : hideen 속성과 같은 경우 공간을 실제로 차지하지만 화면에서만 표시되지 않기때문에 
   Render tree에 포함된다.
   
   
5. 뷰 포트를 기반으로 Render tree 각 노드의 정확한 위치와 크기를 계산한다.(Layout / Reflow)
   
   
6. 계산 된 노드들을 브라우저 화면에 표시된다. (Paint)

 

 

 

 

참고

HTML critical rendering path의 이해