요약

html parsing + css parsing -> render tree -> layout-> paint -> composite

세부사항

1. dom(document object model), cssom(css object model)생성

-> 주소창에 도메인 주소를 입력 합니다 .(ex https://www.ex.com)
-> server 가 입력한 주소창으로 부터 index.html 파일을 찾습니다. 그후
브라우저로 파일을 response 합니다.
-> 브라우저는 전달받은 파일(index.html)을 parsing합니다.
그후 html, css 파일은 각각 dom tree 와 cssom 으로 만들어집니다.

2. Render Tree 생성

DOM Tree와 CSSOM Tree는 순수한 element 와 텍스트만 존재하지만 render tree는 실제화면에 표현되는 노드들로만 구성됩니다.

3. layout

layout 에서는 viewport 에서 각 노드들의 정확한 위치와 크기를 계산합니다. 이 단계에서 정확히 브라우저 화면의 어느위치에 어떤 크기로 출력될지 계산하는 단계입니다. 즉 %, vh 와같은 상대적인 위치, 크기 속성은 실제화면에 그려지는 pixel단위로 변환됩니다.

4. paint

크기, 스타일 계산이 완료된 render tree를 이용해 실제 픽셀 값을 채워넣게 됩니다. 색, 이미지, 그림자 등 모든 처리가 완료됩니다.
처리할 연산이 복잡할수록 paint 소요되는 시간이 증가합니다.

5. composite

화면에 표시하기 위해 페이지에서 paint된 부분을 합치는 과정이다.

참고 reference

링크텍스트
링크텍스트
링크텍스트