[웹개발] Rendering

렌더링 과정

1) HTML을 파싱해서 DOM 트리 구축

- HTML은 부분적으로 실행

2) CSS을 파싱해서 CSSOM 트리 구축

- CSS는 렌더링 차단 리소스로 간주

3) JavaScript 실행

- JavaScript는 파서 차단 리소스(JavaScript에 의해 HTML 구문 분석 차단)

- async로 비동기 로드하여 파서 차단 방지

4) DOM과 CSSOM을 통합해서 Render 트리 구성

- display:none을 사용한 숨겨진 요소는 포함하지 않음

5) Redner 트리 기반으로 Layout 생성

- 뷰포트의 크기 결정

6) Screen에 Painting

- 가시적인 내용을 픽셀로 표시

- DOM의 크기와 적용되는 스타일에 따라 처리 시간이 다름

7) Cirtical Rendering Path 과정 확인

- DevTools로 확인

1. Send Request - index.html에 대한 GET 요청 전송
2. Parse HTML and Send Request - HTML 및 DOM 구문 분석을 시작. style.css 및 main.js에 대한 GET 요청
3. Parse Stylesheet - CSSOM이 style.css 용으로 생성
4. Evaluate Script - main.js 평가
5. Layout - HTML의 메타 뷰포트 태그를 기반으로 레이아웃 생성
6. Paint - 문서의 픽셀을 페인트

 

참고자료

- HTML Critical rendering path의 이해

- [Naver O2] 브라우저는 어떻게 동작하는가?

- [MDN] 중요 렌더링 경로

- Render-tree Construction, Layout and Paint