주요 렌더링 경로는 무엇이며 이를 최적화하는 방법
- Mary-Kate Olsen원래의
- 2024-12-04 19:04:12364검색
주요 렌더링 경로는 무엇입니까?
중요 렌더링 경로는 HTML, CSS 및 JavaScript를 화면의 픽셀로 변환하기 위해 브라우저가 거치는 일련의 단계입니다.
- HTML을 DOM(문서 개체 모델)으로 구문 분석합니다.
- CSSOM(CSS 개체 모델)에서 CSS를 구문 분석합니다.
- 스크립트를 실행합니다.
- 화면 요소의 크기와 위치를 계산합니다.
- 페이지를 렌더링합니다.
이러한 단계는 웹사이트 성능에 직접적인 영향을 미치므로 이 프로세스를 최적화하려면 고려해야 할 사항이 있습니다.
DOM 구축
브라우저는 HTTP 호출을 통해 HTML을 수신합니다. 이를 수신하자마자 해당 데이터로 DOM 구축을 시작합니다.
이 DOM은 노드를 기반으로 구축되었으며, 각 HTML 태그는 노드와 동일하며 HTML의 하위 요소도 DOM 트리의 하위 노드가 됩니다.
노드 수가 많을수록 페이지 렌더링 프로세스를 완료하는 데 시간이 더 오래 걸립니다.
CSS 객체 모델
DOM에는 페이지 콘텐츠에 대한 모든 정보가 포함되어 있지만 CSSOM에는 해당 콘텐츠가 표시되는 방식에 대한 모든 정보가 포함되어 있습니다.
CSS 처리가 렌더링을 차단합니다. 즉, 완전히 처리될 때까지 최종적으로 화면에 콘텐츠를 표시하기 위한 이후 단계를 계속할 수 없습니다. CSS 파일에서 위에서 몇 줄 적용한 스타일을 덮어쓰는 경우가 있기 때문입니다.
렌더 트리
DOM과 CSSOM이 준비되면 이들을 결합하여 화면에 표시될 요소에 대해 필요한 모든 정보를 포함하는 "렌더링 트리"가 생성됩니다. 이 트리에는 다음과 같은 요소가 표시됩니다. 없음; 및 그 하위 요소 또는
태그에 있는 모든 항목.공들여 나열한 것
'레이아웃' 단계에서는 렌더 트리 요소의 크기와 다른 요소와의 관계가 정의됩니다. 이 프로세스는 웹페이지를 방문하는 화면에 따라 다릅니다.
지정하지 않으면 요소는 기본적으로 상위 요소 너비의 100%로 설정되며 일부 브라우저에서는 고정 너비입니다. 그렇기 때문에 이 요소를
우리 문서에서:<head>
<meta name="viewport" content="width=device-width" />
</head>
사용자가 모바일 기기를 회전할 때마다 화면의 요소와 배열이 잠재적으로 변경될 수 있으므로 레이아웃 프로세스가 다시 실행됩니다.
노드 수가 많을수록 이 프로세스를 완료하는 데 시간이 더 오래 걸리기 때문에 레이아웃은 웹사이트 성능에 영향을 미칠 수 있습니다. 레이아웃 프로세스가 느리면 첫 번째 페이지 로드 속도가 느려질 뿐만 아니라 일부 애니메이션이 보기에도 좋지 않을 수 있습니다.
페이지의 그림
화면에 픽셀을 그리는 것은 렌더링 프로세스의 마지막 단계입니다. 첫 번째 로드(onload) 후에는 변경된 페이지 영역만 다시 그려지기 때문에 이 프로세스는 불필요하게 수행되지 않도록 브라우저가 이미 최적화되어 있습니다.
CRP 최적화
이 프로세스는 다양한 방식으로 최적화될 수 있지만 각 사례는 고유하며 결국 중요한 것은 프로젝트에 가장 적합한 조치를 적용하는 것입니다.
가능한 한 빨리 중요한 리소스를 로드하세요.
브라우저가 페이지에 중요한 이미지, 스타일, 스크립트 등의 리소스를 최대한 빨리 다운로드한다는 개념이므로 이러한 요소를 스크립트나 작은 스타일이라도 인라인 태그에 넣을 수 있습니다. 반면에 로드하는 것이 DOM의 일부 요소를 수정하는 스크립트인 경우 모든 노드로 트리가 구축된 후에 이를 로드하는 것이 좋습니다. 이러한 경우에는 body 태그의 마지막에 해당 스크립트를 로드해야 합니다. DOM을 수정하지 않는 스크립트의 로딩을 연기하는 것은 웹사이트 로딩 시간을 줄이는 아주 좋은 습관입니다. 이는 "async" 및 "defer" 속성을 통해 수행할 수 있습니다. 스크립트를 비동기로 설정하면 이 스크립트가 독립적으로 다운로드 및 실행되므로 렌더링 프로세스가 차단되지 않으며 실행 시간은 임의적입니다. defer 속성이 있는 스크립트는 비동기적으로 다운로드되지만 문서에 있는 순서를 존중합니다. 이는 또한 큰 스크립트 후에 작은 스크립트가 실행되는지 여부를 제어하는 좋은 방법이기도 합니다. 위의 예에서는 세 개의 스크립트가 비동기적으로 다운로드됩니다. 마지막 스크립트가 더 작으므로 먼저 다운로드된다고 가정합니다. 첫 번째 스크립트는 다른 요소가 준비될 때까지 기다리거나 렌더링 프로세스를 차단하지 않고 완전히 독립적으로 다운로드 및 실행됩니다. 어떤 경우든 defer 속성이 순서를 따르기 때문에 마지막 스크립트는 두 번째 이후에 실행됩니다. 화면에 필요한 스타일만 로드하는 것이 아이디어이므로 성능 최적화에 도움이 될 수 있는 기술은 페이지 스타일을 휴대폰 적용 여부에 따라 다른 파일로 분리하는 것입니다. , 태블릿, 데스크톱 등 HTML에서는 이러한 파일이 미디어 쿼리와 함께 로드되어 불필요한 스타일 로드를 방지합니다. 어리석게 보일 수도 있지만 파일을 축소하면 공백, 주석 등을 제거하면 브라우저가 렌더링 트리를 구축하기 위해 수행해야 하는 작업이 줄어들기 때문에 페이지 성능을 크게 향상시키는 데 도움이 될 수 있습니다. 다음은 이 프로세스를 최적화하기 위해 명심해야 할 몇 가지 사항입니다. 이를 염두에 두고 주요 렌더링 경로를 최적화하도록 이미 설계된 고품질 코드를 작성하는 것이 더 실용적입니다. 위 내용은 주요 렌더링 경로는 무엇이며 이를 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
<head>
<meta name="viewport" content="width=device-width" />
</head>
<head>
<style>
.foo {
color: red;
}
</style>
</head>
스크립트 로딩 연기
<html>
<body>
<!-- My content -->
<script src="./path/to/my/script.js"></script>
</body>
</html>
미디어 쿼리로 스타일 분리
<head>
<meta name="viewport" content="width=device-width" />
</head>
리소스 최소화
결론