미리 가져오기, 사전 렌더링, 서비스 워커 사전 캐싱

지난 몇 개의 모듈에서는 지연 시간 및 JavaScript 로드, 이미지 및 <iframe> 요소 지연 로딩에 대해 다루었습니다. 리소스 로드를 지연하면 초기 작업 중에 네트워크 및 CPU 사용량이 감소합니다. 필요한 시점에 리소스를 다운로드하여 페이지 로드 시간을 줄일 수 있습니다. 미리 로드하는 대신 사용하지 않게 될 가능성이 있습니다. 이를 통해 초기 페이지 로드 시간을 개선할 수 있지만 후속 상호작용은 발생할 수 있습니다. 전원을 공급하는 데 필요한 리소스가 그 시점에 아직 로드되지 않은 경우 발생할 수 있습니다

예를 들어 페이지에 맞춤 날짜 선택 도구가 포함된 경우 날짜를 연기할 수 있습니다. 선택도구의 리소스에 액세스할 수 있습니다. 하지만 요청 시 날짜 선택기의 리소스를 사용하면 약간의 지연이 발생할 수 있지만 사용자의 네트워크 연결, 기기 기능 또는 리소스를 다운로드 및 파싱하고 실행에 사용할 수 있을 때까지 계속되어야 합니다.

균형이 조금 까다롭습니다. 즉, 대량의 데이터를 로드하여 대역폭을 낭비하고 상호작용 및 후속 페이지를 지연시키는 리소스 부하도 이상적인 방법은 아닐 수 있습니다 다행히 이러한 문제를 해결하기 위해 두 가지 극단적 요소 간의 균형을 더 잘 맞추는 데 사용할 수 있으며, 이 모듈에서는 리소스 미리 가져오기, 사전 렌더링과 서비스 워커를 사용하여 리소스를 사전 캐싱하는 것을 지원합니다.

가까운 미래에 필요한 리소스를 낮은 우선순위로 미리 가져오기

리소스(예: 이미지, 스타일시트, 테이블)를 사전에 가져올 수 있으며 또는 JavaScript 리소스를 사용할 수 있습니다. <link rel="prefetch"> 리소스 힌트를 사용하면 됩니다. 이 prefetch 힌트는 리소스가 필요할 가능성이 높음을 브라우저에 알립니다. 지원하고자 합니다.

prefetch 힌트가 지정되면 브라우저에서 요청을 시작할 수 있습니다. 리소스와 경합하지 않도록 가장 낮은 우선순위에 할당 URL이 필요합니다.

<ph type="x-smartling-placeholder">

리소스를 미리 가져오면 사용자는 그렇게 하지 않기 때문에 사용자 환경을 개선할 수 있습니다. 이 경우 가까운 시일 내에 필요한 리소스가 다운로드될 때까지 필요할 때 디스크 캐시에서 즉시 검색할 수 있습니다.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

위의 HTML 스니펫은 브라우저에 프리페치할 수 있음을 알립니다. 유휴 상태가 되면 date-picker.jsdate-picker.css Cloud Shell에서 사용자가 페이지와 상호작용할 때 리소스를 동적으로 있습니다.

prefetch는 현재 Safari를 제외한 모든 최신 브라우저에서 지원됩니다. 깃발 뒤에서 사용할 수 있습니다. 선점형 VM에서 모든 브라우저에서 작동하는 방식으로 웹사이트용 리소스를 관리할 수 있으며 이 모듈의 후반부에서 프리캐싱에 대한 섹션을 읽어 보세요. 서비스 워커를 사용하여 리소스를 배포합니다.

페이지를 미리 가져와 다음에 빠르게 탐색하세요.

또한 HTML 문서를 가리킬 때 as="document" 속성:

<link rel="prefetch" href="/page" as="document">

브라우저가 유휴 상태이면 /page에 대해 우선순위가 낮은 요청을 시작할 수 있습니다.

<ph type="x-smartling-placeholder">

Chromium 기반 브라우저에서는 Speculation Rules API. 추측 규칙은 JSON 객체로 정의됩니다. 가 페이지 HTML에 포함되거나 자바스크립트를 통해 동적으로 추가된 URL이어야 합니다.

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

JSON 객체는 하나 이상의 작업을 설명하며, 현재 prefetch, prerender, 해당 작업과 연결된 URL 목록 포함 앞의 HTML 스니펫에서 /page-a를 미리 가져오도록 브라우저에 지시합니다. 및 /page-b <link rel="prefetch">와 마찬가지로 추측 규칙은 는 특정 상황에서 브라우저가 무시할 수 있음을 나타냅니다.

<ph type="x-smartling-placeholder">

Quicklink와 같은 라이브러리는 동적으로 페이지 탐색을 개선하여 페이지에 대한 링크가 표시됩니다. 이렇게 하면 사용자가 결국 사용자가 해당 페이지로 이동하는 것과 달리 페이지의 모든 링크를 미리 가져오는 것입니다.

<ph type="x-smartling-placeholder">

페이지 사전 렌더링

리소스를 미리 가져오는 것 외에도 브라우저에 힌트를 줄 수 있습니다. 사용자가 페이지로 이동하기 전에 페이지를 사전 렌더링하는 방법을 보여줍니다. 이렇게 하면 거의 페이지와 리소스를 가져와서 처리하는 즉시 만들 수 있습니다. 사용자가 페이지로 이동하면 페이지가 포그라운드에서 실행되는 것으로 간주됩니다.

사전 렌더링은 Speculation Rules API를 통해 지원됩니다.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
드림 <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

미리 가져오기 및 사전 렌더링 데모

서비스 워커 사전 캐싱

서비스 워커를 사용하여 리소스를 예측적으로 미리 가져올 수도 있습니다. 서비스 워커 사전 캐싱은 Cache API를 사용하여 리소스를 가져오고 저장할 수 있습니다. 브라우저가 Cache API를 사용하여 요청을 처리할 수 있도록 합니다. 않습니다. 서비스 워커 사전 캐싱은 매우 효과적인 서비스 워커를 사용함 캐시 전용 전략이라고 하는 캐싱 전략 이 패턴은 일단 리소스가 서비스 워커 캐시에 배치되면 요청 시 거의 즉시 가져옵니다.

<ph type="x-smartling-placeholder">
</ph> 페이지에서 서비스 워커와 캐시로 이동하는 서비스 워커 캐싱 흐름을 보여줍니다. <ph type="x-smartling-placeholder">
</ph> 캐시 전용 전략은 네트워크상에서 이뤄질 수 있기 때문입니다. 설치되면 캐시된 파일이 리소스 캐시는 서비스 워커 캐시에서만 검색됩니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

서비스 워커를 사용하여 리소스를 사전 캐시하려면 Workbox를 사용하면 됩니다. 만약 하지만 미리 정해진 데이터 세트를 캐시하기 위해 직접 코드를 작성할 수도 있습니다. 할 수 있습니다. 어떤 경우든 서비스 워커를 사용하여 사전 캐시에 사전 캐싱은 서비스가 실제로 리소스를 작업자가 설치됨 설치가 완료되면 사전 캐시된 리소스는 웹사이트에서 서비스 워커가 제어하는 모든 페이지에서 가져올 수 있습니다.

<ph type="x-smartling-placeholder">

Workbox는 사전 캐시 매니페스트를 사용하여 어떤 리소스를 실행해야 하는지 결정합니다. 사전 캐시됩니다. 사전 캐시 매니페스트는 파일 목록 및 버전 관리 정보입니다. '정보 소스' 역할을 하는 사전 캐시되어야 합니다

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

위 코드는 파일 두 개가 포함된 매니페스트의 예입니다. script.ffaa4455.js/index.html 리소스에 버전이 포함된 경우 파일 자체에 있는 정보 (파일 해시라고 함) 다음 revision 속성은 파일의 버전이 이미 지정되어 있으므로 null로 남겨둘 수 있습니다 (예: ffaa4455 script.ffaa4455.js 리소스). 대상 버전이 지정되지 않은 리소스의 경우 빌드 시에 해당 리소스에 대한 버전을 생성할 수 있습니다.

일단 설정되면 서비스 워커를 사용하여 정적 페이지 또는 하위 리소스를 사용하여 후속 페이지 탐색 속도를 높입니다.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

예를 들어 전자상거래 제품 등록정보 페이지에서 서비스 워커를 사용할 수 있습니다. 제품 세부정보 페이지를 렌더링하는 데 필요한 CSS 및 JavaScript를 사전 캐시합니다. 제품 세부정보 페이지로 이동하는 속도가 훨씬 빨라집니다. product-page.ac29.cssproduct-page.39a1.js는 사전 캐시됩니다. workbox-precaching에서 사용할 수 있는 precacheAndRoute 메서드 사전 캐시된 리소스가 제대로 작동하는지 확인하는 데 필요한 핸들러를 자동으로 등록 서비스 워커 API에서 가져올 수 있습니다.

서비스 워커가 널리 지원되므로 서비스 워커를 사용할 수 있음 모든 최신 브라우저에서 사전 캐싱을 해야 합니다.

<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

학습한 내용 테스트

prefetch 힌트는 어떤 우선순위에서 발생하나요?

높음
해방되어 보세요
보통.

미리 가져오기와 사전 렌더링 기능을 사용하고 있나요?

거의 동일하며 사전 렌더링만 할 때 페이지의 하위 리소스를 사용하는 반면 미리 가져오기는 그렇지 않습니다.
페이지의 미리 가져오기와 사전 렌더링은 모두 하위 리소스가 있는 경우 미리 가져오기는 해당 페이지와 반면 사전 렌더링은 한 단계 더 나아가 사용자가 이동할 때까지 전체 페이지의 백그라운드를 유지합니다.

서비스 워커 캐시와 HTTP 캐시는 동일합니다.

거짓

다음: 웹 작업자 개요

지금까지 미리 가져오기, 사전 렌더링 및 서비스 워커 사전 캐싱이 어떻게 작동하는지 알았으니 미래로 향하는 탐색 속도를 높이는 데 유용할 수 있습니다 어떻게 해야 하는지에 대해 정보에 입각한 결정을 내릴 수 있는 위치에 있습니다. 웹사이트 및 웹사이트 사용자에게 도움이 될 수 있습니다

다음으로 웹 작업자에 대한 개요를 제공합니다. 웹 작업자가 웹 작업자를 위한 많은 비용이 기본 스레드에서 작업을 수행하고 기본 스레드에 작업을 위한 여유 공간을 사용자 상호작용을 고려해야 합니다 인간의 삶에 영향을 주는 주요 스킬을 시간이 더 필요하다면 다음 두 모듈을 살펴보실 수 있습니다.