최근 프로젝트를 하면서 서버에서 받아온 HTML 파일을 어떻게 브라우저에 나타나는 지에 대해 자세하게 모르고 있다는 사실을 알게 되었다. 따라서, 브라우저 렌더링 과정에 대해 이해한 바를 정리해보았다.
1. 브라우저
- 브라우저는 인터넷에 접속할 때 사용하는 크롭, 사파리, 인터넷 익스플로어 등과 같은 것을 말한다.
- 브라우저에 대해 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램을 말한다.
- 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여준다.
2. DOM(Document Object Model, 문서 객체 모델)
- HTML, XML 문서의 프로그래밍 인터페이스
- 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공함
- 위 방법으로 문서 구조, 스타일, 내용 등을 변경할 수 있음
- nodes와 objects로 문서를 표현
- 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결
3. 브라우저 렌더링 과정
렌더링(Rendering) : 논리적인 문서의 표현 -> 그래픽 표현식으로 변형
전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서의 요소를 그림
1 - Parsing ) HTML 파일과 CSS 파일을 각각 파싱(구문해석)해서 각각 tree를 만든다.
2 - Render Tree ) 두 트리를 결합하여 Rendering Tree를 만든다.
3 - Layout ) Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
4 - Paint ) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
5 - Composite ) 레이어를 합성하여 실제 화면에 나타낸다.
3-1. Parsing
가장 먼저 HTML 태그를 파싱(해석)해 DOM(Document Object Model) 트리 구성
파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) 트리 구성 작업도 진행
3-2. Render Tree 생성
Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree 구성
Render Tree : 실제로 화면에 그려질 Tree
1. display : none의 경우 Render Tree에서 제외됨!
2. DOM 트리와 렌더 트리의 노드는 서로 1 : 1 대응 X
- DOM 트리의 구성원 가운데 일부 노드(<head>, <title> 등)는 화면에 표시되는 노드가 아니므로 DOM 트리의 구성원이지만 렌더 트리의 구성원은 아님
3. 렌더 트리에서 각 노드는 '프레임(frame)'이나 '박스(box)'로 불리며, CSS 박스 속성 정보가 있음
3-3. Layout 처리
- 렌더트리를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산
- CSS 비주얼 렌더링 모델에 의해 제어되며, 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산
- 이후 Render Tree에 반영함
- 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환
3-4. 페인트(Paint)
- Layout 처리 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환
- 픽셀로 변환된 결과는 하나의 레이어가 아닌 여러 개의 레이어로 관리
- 스타일이 복잡할수록 Paint 시간도 늘어남
3-5. Composite
- Paint 단계에서 생성된 레이어를 실제 화면에 나타냄
브라우저에서 렌더링 성능은 중요한 요소 가운데 중 하나이며,
렌더링 성능을 향상시키면 유저가 느끼는 속도 개선에 큰 효과를 볼 수 있다.
이미지 출처 :
https://web.dev/critical-rendering-path-render-tree-construction/