[자바스크립트] 브라우저 렌더링 과정
최근 프로젝트를 하면서 서버에서 받아온 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/