브라우저 의 렌더링 과정

렌더링이란 HTML, CSS, JavaScript 등의 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 뜻한다.

프론트엔드 개발을 할 때 브라우저의 렌더링 과정을 정확하게 이해하고 있으면, 어떻게 개발을 해야 좋은 성능을 내는지, 성능 최적화를 어떻게 해야하는지를 정확하게 판단할 수 있어야 한다.

 

브라우저 별 렌더링 엔진

브라우저는 렌더링을 할 때, 렌더링 엔진을 사용한다.

파이어폭스: 게코(Gecko)

사파리: 웹킷(Webkit)

크롬: 웹킷을 사용하다가 Fork 하여 블링크(Blink) 엔진을 자체적으로 구현하여 사용

렌더링 순서

1. HTML 파싱 후, DOM 트리 구축 (Document Object Model) 

2. CSS 파싱 후, CSSOM 트리 구축 (CSS Object Model)

3. JS 실행

 (*HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됨)

 (*parser blocking 되는것을 피하는 방법은 <script async src='script.js'> 이런식으로 async 속성을 적용하여 비동기적으로 로드할 수 있음)

4. DOM과 CSSOM 을 조합하여 렌더트리 (Render Tree) 구축 

 (*display: none 속성처럼 화면에서 보이지도 않고 공간을 차지하지 않는것은 렌더트리로 구축되지 않음)

5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow)

6. 계산한 위치/크기를 기반으로 화면에 그림 (Paint)

 

 

 

 

참고문서:

developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko

객체 모델 생성  |  Web Fundamentals  |  Google Developers

boxfoxs.tistory.com/408

브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화