20221008 브라우저 렌더링 원리

 브라우저 렌더링 원리

 

1. 첫 번째로 서버로부터 받은 HTML, CSS를 다운로드한다.

    단순한 텍스트인 HTML, CSS 파일을 Object Model로 만든다.

    HTML은 DOM으로, CSS는 CSSOM으로 만들어진다.

    DOM Tree와 CSSOM Tree가 만들어진다.

 

2. DOM Tree 와 CSSOM Tree가 만들어졌으면 그다음으로는 이 둘을 이용하여 Render Tree를 생성한다.

    Render Tree에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다.

 

3. 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이 

갖고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어느 크기로 출력될 건지 계산하는 단계이다.

레이아웃 단계에서 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 px 단위로 변환된다.

 

4. Layout 계산이 완료되면 이제 요소들을 실제 화면에 그리게 된다. 처리해야 하는 스타일이 복잡할수록 paint 단계에 

소요되는 시간이 길다.(Ex 그라데이션, 그림자 효과 > 단색 배경)

 

1. DOM, CSSOM생성 -> 2. Rende Tree 생성 -> 3. Layout 구성 -> 4. Paint

 

출처 : https://amyhyemi.tistory.com/224