브라우저 렌더링 과정과 DOM, CSSOM, layout, paint

• 브라우저가 웹사이트를 렌더링하는 과정을 정리한다.
• 브라우저가 웹 사이트를 렌더링하는 과정에서는 DOM과 CSSOM이 생성되는데 각각 다음과 같은 의미를 지닌다.

DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 인터페이스이다.

🍻 DOM은 자바스크립트로 접근하여 수정될 수 있다.

CSSOM(CSS Object Model)은 CSS 객체 모델로 자바스크립트가 CSS를 동적으로 조작할 수 있게 해준다. 
🍎 HTML 대신 CSS가 대상인 DOM이라고 할 수있다.

이제 실제 브라우저가 렌더링되는 과정을 살펴보면 다음과 같다.

1. DOM / CSSOM 트리

• DOM 트리가 만들어지기 위해서 일단 브라우저가 HTML의 바이트 코드를 가져와 지정된 인코딩 방법에 따라 문자로 변경한다.
• 이 문자를 브라우저가 각각 의미를 갖는 토큰으로 변환한다.
• 이 토큰을 노드로 전환하고(lexing), 이 노드들로 객체 모델(트리 구조)를 형성한다.

2. CSSOM 역시 위와 같은 과정을 통해서 트리 형태의 CSSOM으로 만들어진다.

3. 브라우저 렌더링 (Render Tree)

• 위에서 만들어진 DOM 트리와 CSSOM 트리가 결합되어 Render Tree가 생성된다.
• Render Tree는 페이지를 렌더링 하는데 필요한 노드만을 가진다.
• ☕ 예를 들면, display: none 속성의 노드는 렌더 트리에 포함되지 않는다.
• 그리고 Layout(모든 객체들의 정확한 위치와 크기)을 계산한 뒤, 이를 기반으로 실제 렌더 트리의 각 노드를 픽셀로 변환해 화면에 출력한다(Paint)

4.  그 뒤엔 특정 이벤트가 일어나 Layout을 다시 계산(reflow)하거나 스타일이 변경되었을 때는 repaint 작업이 일어난다.

• 만약 이미지의 크기를 설정해주지 않았다면, 네트워크 통신을 통해 이미지를 가져올 경우 이미지를 가져온 뒤 이미지의 크기를 알게되기에 reflow 작업이 일어난다.
• 브라우저가 화면을 그리는 작업(paint)는 메모리를 많이 사용하는 비싼 작업이기에, 적게 발생하는 것이 좋고 최적화를 하는 것이 성능 향상을 위해서 중요하다.
• CPU 메인 쓰레드를 사용하는 것 보다 GPU를 사용하는 것이 성능 향상에 도움이 될 수 있는데, video, canvas 태그를 사용하거나 opacity, 3D transform, will-change와 같은 css 속성을 사용하면 GPU를 이용하여 paint를 할 수 있다.

 

 

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model

CSS 객체 모델 (CSSOM) - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - Web Performance | MDN