Critical Rendering Path(CRP, 주요 렌더링 경로)
CRP은 문서(HTML, CSS, Javascript)를 화면에 표현하기 위해 거치는 일련의 과정을 말한다.
1. HTML 마크업을 처리하고 DOM 트리를 빌드합니다.
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.
3. DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.
5. 개별 노드를 화면에 페인트합니다
1. 객체 모델 생성
바이트 → 문자 → 토큰 → 노드 → 객체 모델.
HTML 마크업은 DOM(Document Object Model)으로 변환되고, CSS 마크업은 CSSOM(CSS Object Model)으로 변환됩니다.
DOM 및 CSSOM은 서로 독립적인 데이터 구조입니다.
Chrome DevTools Timeline을 사용하면 DOM 및 CSSOM의 생성 및 처리 비용을 수집하고 점검할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html> - 변환: 브라우저가 HTML의 원시 바이트를 디스크나 네트워크에서 읽어와서, 해당 파일에 대해 지정된 인코딩(예: UTF-8)에 따라 개별 문자로 변환합니다.
- 토큰화: 브라우저가 문자열을 W3C HTML5 표준에 지정된 고유 토큰으로 변환합니다
(예: '', '' 및 꺽쇠괄호로 묶인 기타 문자열).
각 토큰은 특별한 의미와 고유한 규칙을 가집니다.
- 렉싱: 방출된 토큰은 해당 속성 및 규칙을 정의하는 '객체'로 변환됩니다.
- DOM 생성: 마지막으로, HTML 마크업이 여러 태그(일부 태그는 다른 태그 안에 포함되어 있음) 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결됩니다.
이 트리 데이터 구조에는 원래 마크업에 정의된 상위-하위 관계도 포합됩니다.
즉, HTML 객체는 body 객체의 상위이고, body 는 paragraph 객체의 상위인 식입니다.
브라우저는 HTML 마크업을 처리할 때마다 위의 모든 단계를 수행합니다. 즉, 바이트를 문자로 변환하고, 토큰을 식별한 후 노드로 변환하고 DOM 트리를 빌드합니다. 이 전체 프로세스를 완료하려면 시간이 약간 걸릴 수 있으며, 특히 처리해야 할 HTML이 많은 경우 그렇습니다.
CSSOM(CSS Object Model)
브라우저는 단순한 페이지의 DOM을 생성하는 동안 외부 CSS 스타일시트인 style.css를 참조하는 문서의 헤드 섹션에서 링크 태그를 접합니다. 페이지를 렌더링하는 데 이 리소스가 필요할 것이라고 판단한 브라우저는 이 리소스에 대한 요청을 즉시 발송하고 요청의 결과로 다음 콘텐츠가 반환됩니다.
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right } HTML 마크업 내에 직접(인라인) 스타일을 선언할 수도 있지만 CSS를 HTML과 별도로 유지하면 콘텐츠와 디자인을 별도의 항목으로 처리할 수 있습니다. 즉, 디자이너는 CSS를 처리하고, 개발자는 HTML에만 집중할 수 있습니다.
HTML과 마찬가지로, 수신된 CSS 규칙을 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 합니다. 따라서 HTML 대신 CSS에 대해 HTML 프로세스를 반복합니다.
CSS 바이트가 문자로 변환된 후 차례로 토큰과 노드로 변환되고 마지막으로 'CSS Object Model'(CSSOM)이라는 트리 구조에 링크됩니다.
2. 렌더링 트리 생성, 레이아웃 및 페인트
CSSOM 및 DOM 트리는 결합하여 렌더링 트리를 형성합니다. 이 렌더링 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리됩니다. 최적의 렌더링 성능을 얻기 위해서는 이러한 단계 각각을 최적화하는 것이 중요합니다.
DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성합니다.
렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함됩니다.
레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다.
마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다.
# 참고
https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=ko
'개발 > Web' 카테고리의 다른 글
| Throttle, Debounce (0) | 2020.09.02 |
|---|---|
| CSS Pro-Processor(전처리기) SASS, SCSS, LESS (0) | 2020.08.23 |
| Javascript 동기식/비동기식 처리 (0) | 2020.08.20 |
| input array에 대해 동일한 name이 여러개일 경우 각 요소에 대한 처리 (0) | 2020.08.03 |
| 텍스트 호버 이미지 애니메이션 (0) | 2020.08.02 |
