Rendering 개념

TLTR

code를 interactive page로 변환하는 과정¹

브라우저는 어떻게 변환할까?

code를 parsing하여 DOM과 CSSOM을 만드는데..

1. 브라우저 엔진은 html 코드를 token으로 변환한다. 이 토큰은 node로 parsing된다.
2. token으로 만들어진 node는 tree 형태의 구조로 DOM(Document Object Model)를 만든다.
3. 비슷하게 CSS 코드도 CSSOM(CSS Object Model)로 만든다.

보여지는 web page를 만들기위해 Render Tree를 사용

• 브라우저 엔진은 Render Tree라고 불리우는 tree구조를 만들기 위해 DOM 과 CSSOM을 합친다.
• Render Tree는 스타일과 컨텐츠 정보를 포함하고 있다. 자세히 말하자면, 유저가 볼 수 있는 웹페이지를 채우기 위한 정보, 레이아웃을 계산하기 위한 정보, 스크린에 그리기 위한 정보를 말한다.
• 브라우저 엔진은 각 보여지는 요소의 위치를 계산한다. (top left 0,0 부터 시작) ³
• 마지막으로, 브라우저 엔진은 스크린에 보여지는 요소들을 더하거나 그리므로써 rendering이 완료된다.

render speed

속도가 좋으면 좋을 수록 bounce rate와 conversion 이 떨어진다.
구글 연구결과에서 bounced session의 로딩시간이 그렇지 않은 세션보다 2.5s 더 느리다. ²