이것은 Ire Aderinokun이 작성하고 bitsofco.de에 게시된 ' Understading the Critical Rendering Path'를 번역하고, 수정한 글이다. 여기에서 원본 article 읽기 <Understading the Critical Rendering Path'>
브라우저가 서버로부터 페이지에 대한 HTML 응답을 받으면 화면에 픽셀이 그려지기 전에 많은 단계를 거쳐야 한다. 페이지의 초기 페인트를 위해 브라우저가 실행해야하는이 시퀀스를 "중요 렌더링 경로(Critical Rendering Path)"라고 한다. CRP에 대한 지식은 사이트의 성능을 개선 할 수 있는 방법을 이해하는데 매우 유용하다. CRP에는 6 단계가 있다.
-
DOM 트리 구성
-
CSSOM 트리 구성
-
JavaScript 실행
-
렌더 트리 만들기
-
레이아웃 생성
-
페인트 등
1. DOM 트리 구성
DOM ( Document Object Model ) 트리는 완전히 구문 분석 된 HTML 페이지의 객체 표현이다. 루트 요소에서 시작 <html>하여 페이지의 각 요소 / 텍스트에 대해 노드가 생성된다. 다른 요소 내에 중첩된 요소는 하위 노드로 표시되며 각 노드에는 해당 요소에 대한 전체 속성이 포함된다. 예를 들어 <a> 요소에는 해당 href 노드와 관련된 속성이 있다.
예를 들어, 이 샘플 문서를 살펴보자.
그러면 다음과 같은 DOM 트리가 생성된다.
HTML의 좋은 점은 부분적으로 실행될 수 있다는 것이다. 콘텐츠가 페이지에 나타나기 시작하기 위해 전체 문서를 로드할 필요는 없다. 그러나 다른 리소스 인 CSS 및 JavaScript는 페이지 렌더링을 차단할 수 있다.
2. CSSOM 트리 구성
CSSOM ( CSS Object Model )은 DOM과 관련된 스타일의 객체 표현이다. DOM과 유사한 방식으로 표현되지만 명시적으로 선언되었는지 암시적으로 상속되었는지 여부에 관계없이 각 노드에 대한 관련 스타일이 포함되어 있다. 위에서 언급 한 style.css문서의 파일에는 다음과 같은 스타일이 있다.
그러면 다음 CSSOM 트리가 생성된다.
CSS는 "렌더링 차단 리소스"로 간주된다. 이는 먼저 리소스를 완전히 파싱 하지 않고는 렌더 트리 (아래 참조)를 구성할 수 없음을 의미한다. HTML과 달리 CSS는 계단식 상속 특성 때문에 부분적으로 사용할 수 없다. 문서에서 나중에 정의된 스타일은 이전에 정의 된 스타일을 재정의하고 변경할 수 있다. 따라서 스타일 시트 전체가 파싱 되기 전에 스타일 시트에서 이전에 정의된 CSS 스타일을 사용하기 시작하면 잘못된 CSS가 적용되는 상황이 발생할 수 있다. 이는 다음 단계로 넘어가기 전에 CSS를 완전히 파싱 해야 함을 의미한다.
CSS 파일은 현재 장치에 적용되는 경우에만 렌더링 차단으로 간주된다. <link rel="stylesheet"> 태그는 media 속성을 받아들일 수 있는데, 이 속성은 내 스타일에 적용되는 미디어 쿼리를 지정할 수 있다.
예를 들어 미디어 속성이 'orientation:landscape'인 스타일 시트가 있고, 페이지를 세로 모드로 보고 있는 경우 해당 리소스는 렌더링 차단으로 간주되지 않는다.
CSS는 또한 "스크립트 차단"일 수도 있다. 이는 JavaScript 파일이 실행되기 전에 CSSOM이 구성될 때까지 기다려야 하기 때문이다.
3. 자바 스크립트 실행
자바 스크립트는 "파서 차단 리소스"로 간주된다. 이는 HTML 문서 자체의 구문 분석이 JavaScript에 의해 차단됨을 의미한다.
파서가 <script> 태그의 내부 또는 외부에 도달하면, (외부인 경우) 가져오기를 중지하고 실행한다. 따라서 문서 내의 요소를 참조하는 JavaScript 파일이 있는 경우 해당 문서의 모양 뒤에 배치해야 한다.
자바 스크립트가 파서 차단이 되는 것을 방지하기 위해 async속성을 적용하면서 비동기적으로 로드할 수 있다.
4. 렌더 트리 생성
렌더 트리는 DOM과 CSSOM의 조합이다. 페이지에서 최종적으로 렌더링 될 내용을 나타내는 트리이다. 즉, 보이는 콘텐츠만 캡처하고 예를 들어, display: none을 사용하여 CSS로 숨긴 요소는 포함하지 않는다. 따라서, 위의 예제 DOM 및 CSSOM을 사용하게 되면 다음과 같은 렌더 트리가 생성된다.
5. 레이아웃 생성
레이아웃은 뷰포트의 크기를 결정하는 것으로, 이에 의존하는 CSS 스타일 (예 : 백분율 또는 뷰포트 단위)에 대한 콘텍스트를 제공한다. 뷰포트 크기는 문서 헤드에 제공된 메타 뷰포트 태그에 의해 결정된다. 태그가 제공되지 않은 경우 기본 뷰포트 너비 인 980px가 사용된다.
예를 들어 가장 일반적인 메타 뷰포트 값은 장치 너비에 해당하는 뷰포트 크기를 설정하는 것이다.
사용자가 너비가 1000px 인 기기에서 웹 페이지를 방문하면 크기는 해당 단위를 기반으로 한다. 뷰포트의 절반은 500px, 10vw는 100px 등이다.
6. 페인팅
마지막으로 페인팅 단계에서 페이지의 보이는 내용을 픽셀로 변환하여 화면에 표시할 수 있다. 페인트 단계에 걸리는 시간은 DOM의 크기와 적용되는 스타일에 따라 다르다. 일부 스타일은 다른 스타일보다 실행하는 데 더 많은 작업이 필요하다. 예를 들어, 복잡한 그라데이션 배경 이미지는 단순한 단색 배경색보다 더 많은 시간이 필요하다.
요약
진행 중인 중요 렌더링 경로를 확인하려면 DevTools에서 검사할 수 있다. Chrome에서는 타임 라인 탭 아래에 있다.
예를 들어, 위의 샘플 HTML ( <script> 태그 가 추가됨 )을 보자.
페이지 로드에 대한 이벤트 로그를 보면 다음과 같다.
- 요청 보내기- index.html에 대한 GET 요청이 전송
- HTML 구문 분석 및 요청 보내기 -HTML 및 DOM 구성 구문 분석을 시작 style.css 및 main.js에 대한 GET 요청 보내기
- 스타일 시트 구문 분석 -style.css 용으로 작성된 CSSOM
- 스크립트 평가-main.js 평가
- 레이아웃 -HTML의 메타 뷰포트 태그를 기반으로 레이아웃 생성
- 페인트 -문서의 픽셀 페인트
이 정보를 바탕으로 Critical Rendering Path를 최적화하는 방법을 결정할 수 있다.
'Tech > Javascript' 카테고리의 다른 글
| [Javascript] ES6 - Template literal (0) | 2021.03.07 |
|---|---|
| [Javascript] DOM을 조작하는 방법 (0) | 2021.01.27 |
| [Javascript ] DOM (0) | 2021.01.18 |
| [Javascript] 객체 상속 (object-inheritance), Object.create() (0) | 2021.01.03 |
| [Javascript] 객체 상속 (object-inheritance), __proto__ (0) | 2021.01.03 |