브라우저 렌더링 과정

사용자가 DNS를 통해 서버에 요청을 하고 3-way-handshake가 이루어져 서버로부터 응답을 받았다는 가정을 한 후 글을 진행 하겠습니다.

1. 사용자의 접근

사용자가 브러우저를 통해 웹사이트에 접속하면 DNS에 연결된 서버로부터 Html, Css, font, image등 웹 사이트에 필요한 자원을 다운로드 받습니다.

2. Html 파일과 Css 파일 파싱(Parsing)

Html과 Css 파일을 파싱하여 DOM(Document Object Model) Tree와 CSSOM(Css Object Model) Tree를 만듭니다.

DOM의 경우 파싱 중 Js를 만나면 브라우저는 파싱 작업을 일시 중지하고 Js 엔진에 제어권을 넘기게 됩니다. 넘겨 받은 Js엔진은 스크립트 코드를 실행시키고 브라우저에게 다시 제어권을 넘겨 Html문서 파싱 작업을 이어갑니다. 이러한 이유는 Js 코드가 Html 문서의 구조나 컨텐츠를 변경하고나 동적으로 생성하기 위함입니다 따라서 Js코드가 먼저 실행되어 DOM을 조작할 수 있도록 하기 위해 HTML 파싱이 일시 중지되는 것입니다. 결론적으로, Html문서를 파싱하는 중 Js 코드를 먼저 실행하는 이유는 Js코드가 DOM을 조작하고 웹 페이지의 동적인 기능을 구현하기 위함입니다.

최신 브라우저에서는 Js코드를 비동기적으로 실행할 수 있는 async 및 defer 속성을 제공합니다. async 속성을 사용하면 Js 코드가 다운로드 되는 동안에도 Html의 파싱을 계속 진행할 수 있으며, defer 속성을 사용하면 Html 문서 파싱이 완료된 후에 Js 코드가 실행됩니다.

3. Render Tree 생성(Style)

현재 단계에서는 파싱 단계에서 생성한 DOM과 CSSOM Tree를 결합하여 Rander Tree를 생성합니다. Rander Tree는 실제로 화면에 그려질 Tree입니다.

4. Render Tree의 각 노드의 위치 및 크기 결정(Layout)(Reflow)

Layout 단계에서는 Render Tree의 정보를 통하여 화면에 배치할 노드들의 정확한 위치와 크기를 계산하여 Render Tree에 반영합니다.

style에 크기에 대한 값이 비율(viewport, em, rem, % 등)로 되어있다면 px단위로 변환하게됩니다.

우리가 흔히 말하는 Reflow가 발생한다. 라는것이 현재 단계에서 발생하는 것입니다. Reflow는 새로운 요소가 추가되거나 또는 요소가 지워지거나, 요소의 위치가 변경되거나 크기가 변경되거나, 위치 값이나 크기 값이 상대값으로 되어있다면 발생합니다. Reflow가 발생하면 Repaint는 무조건 발생한다. 과도한 Reflow와 Repaint는 브라우저 성능에 안좋은 영향을 끼치며, 이러한 문제점을 해결하기 위해 가상돔이 나오게 되었습니다.

Reflow가 발생하는 대표적인 속성들은 position, width, height, margin, padding, border, font-size, font-weight, display: none 등등 있습니다.

display: none과 visibility: hidden은 비슷한 속성이지만 display: none의 경우 DOM에서 제거시키는 옵션이기 때문에 Reflow가 발생하며 그에 따라 Repaint까지 발생합니다. 이와 반대로 visibility: hidden은 DOM에서 제거하는 것이 아닌 안보이게 하는 것이기 때문에 Repaint만 발생합니다.

5. 화면에 실제 픽셀로 변환(Paint)(Repaint)

Layout 단계에서 모든 계산이 완료되면, Render Tree의 각 노드를 화면에 실제 픽셀로 변환하는 작업을 하게됩니다. 이 단계를 Painting 단계라고 합니다.

DOM 노드의 크기나 위치가 변경되었을 때에는 Reflow가 발생 했다면, 위치나 크기가 아닌 다른 style이 변경 되었을 때에는 Repaint가 발생합니다. Repaint가 발생하는 대표적인 속성들은 background, color, text-decoration, border-style 등등 이 있습니다.