[개념정리] 브라우저 렌더링의 순서

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

렌더링

사전적 의미

아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 공업 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도

 

브라우저 렌더링

HTML, CSS, JS 등 개발자가 작성한 문서를 파싱하여 사용자가 눈으로 볼 수 있도록 브라우저에 출력하는 과정

 

 

브라우저 렌더링 순서

1. 서버로부터 HTML 문서를 전달받는다.

 

2. 브라우저 엔진은 HTML 문서를 위에서 아래로 파싱하며 태그와 속성을 발견한다.

 

3. 태그와 속성들이 트리 형태로 변환되며 메모리에 저장되고, 이를 DOM Tree라고 한다.

 

4. HTML 파싱 중 CSS 링크 또는 스타일 태그를 만나면 CSSOM Tree로 변환한다.

 

5. 문서의 파싱이 완료되면 DOM과 CSSOM 트리를 결합하여 렌더 트리를 생성한다.

 

6. 렌더 트리는 브라우저 상에서 요소의 위치와 크기를 결정하는 Reflow 과정을 거친다.

 

7. 요소의 색상, 경계선 등 시각적 요소를 그리는 Repaint 과정이 진행된다.

 

HTML 파싱 중간에 script 태그를 만나면 어떻게 될까?

브라우저는 해당 스크립트를 로드하고 실행하기 위해 파싱을 일시 중단한다.

 

외부 스크립트의 경우 스크립트를 로드하고 실행한 후 파싱을 재개하고

 

내부 스크립트의 경우 실행이 완료될 때 까지 파싱이 중단된다.

 

이로 인해 파싱 속도가 저하되게 되고, DOM 트리가 완성되기 전에 스크립트가 DOM을 조작할 가능성이 있어

 

예기치 못한 상황이 발생할 수 있다.

 

 

파싱 중간에 script가 실행되는 것을 방지하려면?

1. async나 defer 속성을 사용한다.

async와 defer는 스크립트를 비동기적으로 로드할 수 있도록 하는 script 태그 속성이다.

 

HTML 파싱이 중단되는 현상과 DOM 트리가 완성되기 전에 스크립트가 실행되는 것을 방지해준다.

<script async ... />
<script defer ... />

 

 

async vs defer

async

 • 스크립트가 로드되는 즉시 실행된다.

 • 스크립트의 로드 순서가 상관없을 경우 사용한다.

 

defer

 • HTML 문서 파싱이 완료된 후 실행된다.

 • 스크립트의 실행 순서가 중요할 경우 사용한다.

 

2. window.onload() 함수로 DOM 조작 시점을 컨트롤한다.

 

 

참고 사이트

https://www.youtube.com/watch?v=R23JmhbPnVo