Web - 브라우저 랜더링 과정

브라우저 랜더링 과정

1. 사용자의 접근

사용자가 브라우저를 통해 웹 사이트에 접속하면, Dns에 연결된 서버로부터 HTML, CSS, font, image 등 웹 사이트에 필요한 리소스를 다운로드 받습니다.

 

 

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

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

* 파싱 중 Js Script Tag를 만나면 브라우저는 파싱 작업을 일시 중지하고 Js 엔진에 제어권을 넘긴다. Js 코드를 로드, 파싱, 실행한다고 한다. 왜냐하면 DOM을 변경하는 행위가 있을 수 있기 때문이다. 이것이 HTML 파서가 HTML 문서를 다시 파싱 하기 전에 자바스크립트를 기다려야만 하는 이유이다. Js 엔진의 작업이 종료되면 브라우저에게 다시 제어권을 넘겨 파싱 작업을 이어간다.

 

3. Render Tree 생성 (Style)

Style 단계에서는 Parsing 단계에서 생성한 DOM과 CSSOM Tree를 결합하여 Rander Tree를 생성한다. Rander Tree는 실제로 화면에 그려질 Tree이다.

 

아래 링크의 사이트를 보면

https://web.dev/critical-rendering-path-render-tree-construction/

Render-tree Construction, Layout, and Paint

Render Tree를 구성할 때visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 빈 상자로 Render Tree에 포함이 되지만, display: none의 경우 Render Tree에서 제외된다고 한다.

 

 

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

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

크기에 대한 값이 viewport(vw, wh), % 등등일 때 px단위로 변환한다.

* Reflow는 새로운 요소가 추가되거나 또는 요소가 지워지거나, 요소의 위치가 변경되거나 크기가 변경되거나, 위치 값이나 크기 값이 상대 값으로 되어 있다면 브라우저(윈도우)의 크기가 변경될 때도 발생한다. Reflow가 발생한다면 Repaint는 무조건 발생한다.

* Reflow가 발생하는 대표적인 속성들은 position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow 등이 있다.

 

 

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

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

* 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 Reflow 수행 없이 바로 Repaint만 발생한다.

* Repaint가 발생하는 대표적인 속성들은 background, color, text-decoration, border-style, border-radius 등이 있다.

 

 

 

 

 

이미지 출처

https://web.dev/critical-rendering-path-render-tree-construction/