렌더링이란?
HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정
파싱이란?
개발자가 작성한 코드를 브라우저가 이해하고 사용할 수 있는 구조로 변환하는 것
1. HTML 파일과 CSS 파일을 불러온다.
2. HTML 파일과 CSS 파일을 파싱하는 과정에서 DOM 트리와 CSSOM 트리를 각각 구축한다. (Parsing)
3. DOM 트리와 CSSOM 트리를 결합해 렌더 트리를 만든다. (Style)
4. 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하는 레이아웃을 진행한다. (Layout)
5. 레이아웃 단계에서 계산된 값을 이용해 렌더트리의 각 노드를 화면상의 실제 픽셀로 변환한다. (Paint)
6. 페인트 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. (Composite)
Parsing
브라우저에 받아온 HTML 파일을 해석하여 DOM 트리를 생성한다.
만약 파싱 중 CSS가 포함되어 있다면 CSSOM 트리를 구성하는 작업도 함께 한다.
Style
Parsing 단계에서 생성된 DOM 트리와 CSSOM 트리를 매칭시켜서 Render Tree를 구성한다.
Render Tree는 실제로 화면에 그려질 트리다.
예를 들면 Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외된다.
Layout
노드의 정확한 위치와 크기를 계산한다. 노드의 정확한 크기와 위치를 파악하기 위해 루트부터 노드를 순회하면서 계산하고, 레이아웃 결과로 각 노드의 정확한 위치와 크기를 픽셀값으로 렌더트리에 반영한다.
만약 CSS에서 크기 값을 %로 지정하였다면, 레이아웃 단계를 거친 후 % 값은 계산되고 측정 가능한 픽셀 단위로 변환된다.
스타일 단계에서 구성되는 렌더 트리는 자바스크립트에 의해 DOM 트리, CSSOM 트리가 변경될 때 다시 재구성된다. DOM이 추가/삭제되거나 요소에 기하적인 영향(높이, 넓이, 위치)을 주는 CSS 속성값을 변경하는 경우, 렌더 트리가 다시 재구성된다. 즉, 레이아웃부터 이후 과정을 다시 수행하며 이것을 레이아웃이라고 한다
Paint
이전 레이아웃 단계에서 계산된 값을 이용해 렌더트리의 각 노드를 화면상의 실제 픽셀로 변환한다.
이때 위치와 관계없는 CSS 속성(색상, 투명도 등)을 적용한다. 그리고 픽셀로 변환된 결과는 포토샵의 레이어처럼 생성되어 개별 레이어로 관리된다.
단, 각각의 엘리먼트가 모두 레이어가 되는 것은 아니다. transform 속성 등을 사용하면 엘리먼트가 레이어화 되는데, 이 과정을 페인트라고 한다.
당연한 말이지만 스타일이 복잡할수록 Paint 시간도 늘어납니다.
Composite
Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내 화면에서 웹 페이지를 확인할 수 있다.
그럼 자바스크립트는???
Javascript 또한 렌더링 엔진에서 처리가 될까요? 아닙니다.
자바스크립트는 자바스크립트 엔진이 처리합니다.
HTML 파서는 <script> 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘깁니다.
제어 권한을 넘겨받은 자바스크립트 엔진은 <script> 태그 내의 Javascript 코드 또는 src 속성에 정의된 Javascript 파일을 로드하고 파싱 하여 실행합니다. Javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개합니다.
참고 자료
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
https://bbangson.tistory.com/87
