브라우저 렌더링 원리
브라우저 렌더링 원리
- 첫 번째로 서버로부터 받은 HTML, CSS를 다운로드한다.
단순한 텍스트인 HTML, CSS 파일을 Object Model로 만든다.
HTML은 DOM으로, CSS는 CSSOM으로 만들어진다.
DOM Tree와 CSSOM Tree가 만들어진다.
- DOM Tree 와 CSSOM Tree가 만들어졌으면 그다음으로는 이 둘을 이용하여 Render Tree를 생성한다.
Render Tree에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다.
- 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이
갖고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어느 크기로 출력될 건지 계산하는 단계이다.
레이아웃 단계에서 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 px 단위로 변환된다.
- Layout 계산이 완료되면 이제 요소들을 실제 화면에 그리게 된다. 처리해야 하는 스타일이 복잡할수록 paint 단계에
소요되는 시간이 길다.(Ex 그라데이션, 그림자 효과 > 단색 배경)
- DOM, CSSOM생성 -> 2. Rende Tree 생성 -> 3. Layout 구성 -> 4. Paint
- #브라우저 렌더링 원리
