지난 몇 개의 모듈에서는 지연 시간 및
JavaScript 로드, 이미지 및 <iframe> 요소 지연 로딩에 대해 다루었습니다.
리소스 로드를 지연하면 초기 작업 중에 네트워크 및 CPU 사용량이 감소합니다.
필요한 시점에 리소스를 다운로드하여 페이지 로드 시간을 줄일 수 있습니다.
미리 로드하는 대신 사용하지 않게 될 가능성이 있습니다.
이를 통해 초기 페이지 로드 시간을 개선할 수 있지만 후속 상호작용은 발생할 수 있습니다.
전원을 공급하는 데 필요한 리소스가 그 시점에 아직 로드되지 않은 경우
발생할 수 있습니다
예를 들어 페이지에 맞춤 날짜 선택 도구가 포함된 경우 날짜를 연기할 수 있습니다. 선택도구의 리소스에 액세스할 수 있습니다. 하지만 요청 시 날짜 선택기의 리소스를 사용하면 약간의 지연이 발생할 수 있지만 사용자의 네트워크 연결, 기기 기능 또는 리소스를 다운로드 및 파싱하고 실행에 사용할 수 있을 때까지 계속되어야 합니다.
균형이 조금 까다롭습니다. 즉, 대량의 데이터를 로드하여 대역폭을 낭비하고 상호작용 및 후속 페이지를 지연시키는 리소스 부하도 이상적인 방법은 아닐 수 있습니다 다행히 이러한 문제를 해결하기 위해 두 가지 극단적 요소 간의 균형을 더 잘 맞추는 데 사용할 수 있으며, 이 모듈에서는 리소스 미리 가져오기, 사전 렌더링과 서비스 워커를 사용하여 리소스를 사전 캐싱하는 것을 지원합니다.
가까운 미래에 필요한 리소스를 낮은 우선순위로 미리 가져오기
리소스(예: 이미지, 스타일시트, 테이블)를 사전에 가져올 수 있으며
또는 JavaScript 리소스를 사용할 수 있습니다. <link rel="prefetch"> 리소스 힌트를 사용하면 됩니다. 이
prefetch 힌트는 리소스가 필요할 가능성이 높음을 브라우저에 알립니다.
지원하고자 합니다.
prefetch 힌트가 지정되면 브라우저에서 요청을 시작할 수 있습니다.
리소스와 경합하지 않도록 가장 낮은 우선순위에 할당
URL이 필요합니다.
리소스를 미리 가져오면 사용자는 그렇게 하지 않기 때문에 사용자 환경을 개선할 수 있습니다. 이 경우 가까운 시일 내에 필요한 리소스가 다운로드될 때까지 필요할 때 디스크 캐시에서 즉시 검색할 수 있습니다.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
위의 HTML 스니펫은 브라우저에 프리페치할 수 있음을 알립니다.
유휴 상태가 되면 date-picker.js 및 date-picker.css Cloud Shell에서
사용자가 페이지와 상호작용할 때 리소스를 동적으로
있습니다.
prefetch는 현재 Safari를 제외한 모든 최신 브라우저에서 지원됩니다.
깃발 뒤에서 사용할 수 있습니다. 선점형 VM에서
모든 브라우저에서 작동하는 방식으로 웹사이트용 리소스를 관리할 수 있으며
이 모듈의 후반부에서 프리캐싱에 대한 섹션을 읽어 보세요.
서비스 워커를 사용하여 리소스를 배포합니다.
페이지를 미리 가져와 다음에 빠르게 탐색하세요.
또한
HTML 문서를 가리킬 때 as="document" 속성:
<link rel="prefetch" href="/page" as="document">
브라우저가 유휴 상태이면 /page에 대해 우선순위가 낮은 요청을 시작할 수 있습니다.
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">와 마찬가지로 추측 규칙은
는 특정 상황에서 브라우저가 무시할 수 있음을 나타냅니다.
Quicklink와 같은 라이브러리는 동적으로 페이지 탐색을 개선하여 페이지에 대한 링크가 표시됩니다. 이렇게 하면 사용자가 결국 사용자가 해당 페이지로 이동하는 것과 달리 페이지의 모든 링크를 미리 가져오는 것입니다.
<ph type="x-smartling-placeholder">페이지 사전 렌더링
리소스를 미리 가져오는 것 외에도 브라우저에 힌트를 줄 수 있습니다. 사용자가 페이지로 이동하기 전에 페이지를 사전 렌더링하는 방법을 보여줍니다. 이렇게 하면 거의 페이지와 리소스를 가져와서 처리하는 즉시 만들 수 있습니다. 사용자가 페이지로 이동하면 페이지가 포그라운드에서 실행되는 것으로 간주됩니다.
사전 렌더링은 Speculation Rules API를 통해 지원됩니다.
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
미리 가져오기 및 사전 렌더링 데모
서비스 워커 사전 캐싱
서비스 워커를 사용하여 리소스를 예측적으로 미리 가져올 수도 있습니다.
서비스 워커 사전 캐싱은 Cache API를 사용하여 리소스를 가져오고 저장할 수 있습니다.
브라우저가 Cache API를 사용하여 요청을 처리할 수 있도록 합니다.
않습니다. 서비스 워커 사전 캐싱은 매우 효과적인 서비스 워커를 사용함
캐시 전용 전략이라고 하는 캐싱 전략 이 패턴은
일단 리소스가 서비스 워커 캐시에 배치되면
요청 시 거의 즉시 가져옵니다.
<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.css 및 product-page.39a1.js는
사전 캐시됩니다. workbox-precaching에서 사용할 수 있는 precacheAndRoute 메서드
사전 캐시된 리소스가 제대로 작동하는지 확인하는 데 필요한 핸들러를 자동으로 등록
서비스 워커 API에서 가져올 수 있습니다.
서비스 워커가 널리 지원되므로 서비스 워커를 사용할 수 있음 모든 최신 브라우저에서 사전 캐싱을 해야 합니다.
<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">학습한 내용 테스트
prefetch 힌트는 어떤 우선순위에서 발생하나요?
미리 가져오기와 사전 렌더링 기능을 사용하고 있나요?
서비스 워커 캐시와 HTTP 캐시는 동일합니다.
다음: 웹 작업자 개요
지금까지 미리 가져오기, 사전 렌더링 및 서비스 워커 사전 캐싱이 어떻게 작동하는지 알았으니 미래로 향하는 탐색 속도를 높이는 데 유용할 수 있습니다 어떻게 해야 하는지에 대해 정보에 입각한 결정을 내릴 수 있는 위치에 있습니다. 웹사이트 및 웹사이트 사용자에게 도움이 될 수 있습니다
다음으로 웹 작업자에 대한 개요를 제공합니다. 웹 작업자가 웹 작업자를 위한 많은 비용이 기본 스레드에서 작업을 수행하고 기본 스레드에 작업을 위한 여유 공간을 사용자 상호작용을 고려해야 합니다 인간의 삶에 영향을 주는 주요 스킬을 시간이 더 필요하다면 다음 두 모듈을 살펴보실 수 있습니다.