프런트엔드의 페이지 렌더링 최적화 방법 요약

이번에는 프런트엔드 페이지 렌더링 최적화 방법에 대해 요약해보겠습니다. 프런트엔드 페이지 렌더링 최적화를 위한 주의사항은 무엇인가요?

최적화를 해야 하는 이유

고전적인 문제: 너무 긴 흰색 화면 시간, 열악한 사용자 경험
원인: 네트워크 문제, 중요 렌더링 경로(CRP) 문제

최적화 방법

최적화 방법, 온라인에서 검색하세요. 네트워크 최적화 및 정적 리소스(html, js, css, 이미지) 최적화에 지나지 않는 많은 최적화 요약이 있습니다. 다음으로는 네트워크 최적화는 제쳐두고 정적 자원의 최적화만 분석하겠습니다. 정적 리소스를 최적화하는 열쇠는 Critical Rendering Path(CRP)의 작동 원리와 규칙을 깊이 이해해야 한다는 것입니다.

1. 브라우저의 주요 렌더링 경로(html 로딩 과정)를 이해하세요.

면접 필수 질문:
1. URL 입력부터 페이지 표시까지의 전체 과정을 설명해주세요.
2. HTML 로딩의 전체 과정을 설명해주세요.
위와 같은 질문에 정확하게 대답하려면 어떻게 해야 할까요? 그러면 브라우저의 중요한 렌더링 경로를 완전히 이해해야 합니다. 작동 원리를 이해해야만 정적 리소스에 대한 최적화 솔루션을 더 잘, 더 깊이 이해할 수 있습니다.

렌더링의 중요한 경로 다음 5 단계로 나뉩니다 tree

构建过程：Bytes->Characters->Tokens->Nodes->Dom

• 렌더링 트리에 따라 레이아웃하려면 노드의 기하학적 정보를 계산합니다(레이아웃)

화면에 각 노드를 그립니다(페인트)

• 우선 다음과 같이 할 수 있습니다. 위의 5단계에서 볼 수 있듯이 DOM 트리와 CSSOM 트리가 생성된 후에야 렌더링 트리가 생성될 수 있으므로 이 두 단계는 전체 렌더링을 차단합니다. 물론 DOM 트리는 페이지 콘텐츠를 제공해야 합니다. CSSOM의 필요성은 그다지 명확하지 않으므로 CSSOM에서 구성됩니다. 프로세스 중에 일부 최적화가 이루어질 수 있습니다. 최적화를 수행하기 전에 먼저 이러한 지식 포인트를 이해해야 합니다.

  构建过程：Bytes->Characters->Tokens->Nodes->CSSOM

  위의 세 가지 지식을 바탕으로 CSS 최적화가 할 수 있는 일은 다양한 CSS 사용 시나리오와
우선순위

에 따라 비차단 표시를 수행하는 것임을 분명히 알 수 있습니다.

CSS가 필요한 경우

최대한 빨리 로드

• (1. 참조 위치가 더 높음, 2. 파일 크기를 줄임)하여 첫 번째 렌더링의 차단을 줄이도록 하세요
  2.
javascript
• 렌더링에 미치는 영향과 영향을 줄이기 위한 전략
  먼저 javascript에 대해 논의해 보겠습니다. 웹 페이지, 콘텐츠, 스타일의 모든 측면을 수정하고 사용자 상호 작용에 응답할 수 있습니다. 그러나 JavaScript는 DOM 구성을 방지하고 웹 페이지 렌더링을 지연시킬 수도 있습니다. javascript, DOM, CSSOM 간의 종속성을 살펴보겠습니다.

• javascript는 콘텐츠와 스타일을 수정할 수 있습니다

인라인 자바스크립트든 외부 자바스크립트 파일이든 상관없이 DOM 구성을 방해합니다

1、过滤掉不可见节点(脚本标记、元标记)
2、过滤掉样式隐藏的节点（display:none）

CSSOM 구성은 javascript 실행에 영향을 미칩니다

1、默认情况下，CSS是阻塞渲染的资源
2、我们可以通过媒体查询和媒体类型把一部分CSS标记为不阻塞渲染
（媒体查询的不足就是会严重影响关键渲染路径的性能）
<link>
<link>
<link>
3、浏览器**会下载所有CSS资源**、无论它阻塞还是不阻塞

최적화되지 않음-- JavaScript가 정상적으로 로드됨

최적화 후--Javascript가 비동기적으로 로드됨

• 위의 분석을 바탕으로 우리는 먼저 로드할 필요가 없는 js에 대해 비동기 로딩을 선택하는 것이 최선의 선택이라는 것을 분명히 알 수 있습니다.

  3. 이미지가 첫 번째 화면 렌더링에 미치는 영향

  이미지는 첫 번째 화면의 렌더링을 방해하지 않지만, 사용자 경험을 높이기 위해서는 적절한 크기의 이미지를 로드하여 이미지 렌더링 속도를 높이는 것을 고려해야 합니다.

  주요 렌더링 경로를 평가하는 방법

  이전 콘텐츠를 통해 주요 경로 렌더링과 가능한 최적화 기회의 기본 원칙을 이해할 수 있습니다. 이제 기존 페이지의 CRP 성능을 평가하는 데 도움이 되는 몇 가지 도구를 사용해야 합니다.

  • 테스트 도구: Lighthouse는 웹 페이지를 신속하게 테스트하고 성능 보고서를 제공할 수 있습니다.

  • 모니터링 도구: Nivigation Timing Api 코드를 설정하고 사용자 성능을 실시간으로 모니터링하세요.

  Summary

  javascript는 DOM 구성을 차단하고(DOMCommentLoadedtrigger가 지연됨) CSS 다운로드 및 완료 시 javascript 실행이 차단됩니다. 자바스크립트가 없거나 비동기식 자바스크립트만 있는 페이지에서는 DOM 구성과 CSSOM 구성이 서로 영향을 미치지 않습니다.

  이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

  추천 도서:

  프런트 엔드 테스트 피라미드를 사용하는 단계에 대한 자세한 설명
  

  MySQL 데이터베이스에 대한 액세스 거부 처리 방법
  

위 내용은 프런트엔드의 페이지 렌더링 최적화 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!