- 브라우저가 HTML,CSS,JavaScript를 화면에 픽셀로 변환하는 일련의 단계를 말한다.
- 이를 최적화하면 렌더링 성능이 향상된다.
- CRP 최적화는 렌더링 시간을 개선시킨다.
- 1초당 60프레임에 리플로우와 리페인트가 발생 할 수 있도록 한다.
- DOM 트리 만들기
- HTML 페이지의 Object 표현
- html 로부터 시작되어 페이지의 각 element, text에 대한 노드가 만들어진다.
- CSSOM 트리 만들기
- DOM과 관련된 스타일의 Object 표현
- CSS는 렌더링을 차단하는 리소스로, 완전히 파싱되지 않으면 render 트리를 구성 할 수 없다.
- HTML과 달리 CSS 는 상속된 계산식 (캐스캐이딩~) 특성때문에 부분적으로 실행될 수 없으며, 문서의 뒷부분에 정의된 스타일은 이전에 정의된 스타일을 덮어쓴다.
- JavaScript 파일은 실행되기 전에 CSSOM이 생성되는 것을 기다려야한다.
- JavaScript 실행
- JavaScript 는 파서 차단 리소스이다. 즉, HTML 문서 자체의 파싱이 JavaScript 에 의해 차단된다는 뜻!
- 파서가 내부태그이든, 외부태그이든
<script>태그에 도달하면 스크립트 태그를 실행한다. - JavaScript가 파서를 차단하는 것을 피하려면 async 속성을 사용하자.
- Render 트리 만들기
- Render 트리는 DOM 과 CSSOM이 합쳐진 것
- 페이지에서 최종적으로 렌더링 할 내용을 나타내는 트리
- display:none 으로 숨겨진 요소는 포함X
- 레이아웃 생성하기
- 뷰포트의 크기를 결정
- 뷰포트 크기는 meta 태그의 viewport 속성을 통해 결정되는데, 기본 뷰포트 너비는 980px
- 뷰포트의 크기를 결정
- 페인팅
- 페이지의 가시적 내용을 픽셀로 변환하여 화면에 표시한다.