Tìm nạp trước, kết xuất trước và lưu trước trình chạy dịch vụ

Trong vài học phần cuối, bạn đã khám phá các khái niệm như trì hoãn tải JavaScripthình ảnh tải từng phần cũng như các phần tử <iframe>. Việc trì hoãn tải tài nguyên sẽ làm giảm mức sử dụng mạng và CPU trong lần đầu tải trang bằng cách tải tài nguyên xuống tại thời điểm cần chúng, thay vì tải trước lên, vì chúng có thể khiến chúng không được sử dụng. Cách này có thể giúp cải thiện thời gian tải trang ban đầu, nhưng có thể phát sinh các tương tác sau đó nếu các tài nguyên cần thiết để cấp nguồn cho chúng chưa được tải tại thời điểm đó chúng xảy ra.

Ví dụ: nếu một trang chứa bộ chọn ngày tuỳ chỉnh, thì bạn có thể hoãn ngày đó tài nguyên của bộ chọn cho đến khi người dùng tương tác với phần tử. Tuy nhiên, việc tải các tài nguyên theo yêu cầu của công cụ chọn ngày có thể gây ra chậm trễ—có thể hơi, nhưng có thể là không, tuỳ thuộc vào kết nối mạng của người dùng, khả năng của thiết bị, hoặc cho đến khi tài nguyên được tải xuống, phân tích cú pháp và có sẵn để thực thi.

Đó là một sự cân bằng khó khăn — bạn không muốn lãng phí băng thông khi tải tài nguyên có thể không được sử dụng, nhưng trì hoãn tương tác và trang tiếp theo thì tải có thể cũng không phải là lý tưởng. Rất may là có một số công cụ bạn có thể sử dụng để cân bằng tốt hơn giữa hai thái cực này—và học phần này đề cập đến một số kỹ thuật bạn có thể sử dụng để đạt được điều đó, chẳng hạn như tìm nạp trước tài nguyên, hiển thị trước toàn bộ trang và lưu trước tài nguyên vào bộ nhớ đệm bằng cách sử dụng trình chạy dịch vụ.

Tìm nạp trước tài nguyên cần thiết trong tương lai gần với mức độ ưu tiên thấp

Bạn có thể tìm nạp trước tài nguyên, bao gồm cả hình ảnh, biểu định kiểu hoặc tài nguyên JavaScript—bằng cách sử dụng gợi ý tài nguyên <link rel="prefetch">. Chiến lược phát hành đĩa đơn Gợi ý prefetch thông báo cho trình duyệt biết rằng có một tài nguyên có thể được yêu cầu trong trong tương lai gần.

Khi bạn chỉ định gợi ý prefetch, trình duyệt có thể bắt đầu yêu cầu để tài nguyên đó có mức độ ưu tiên thấp nhất nhằm tránh cạnh tranh với các tài nguyên bắt buộc đối với trang hiện tại.

Việc tìm nạp trước tài nguyên có thể cải thiện trải nghiệm người dùng, vì người dùng không phải đợi các tài nguyên cần thiết trong tương lai gần được tải xuống, như chúng có thể được truy xuất ngay lập tức từ bộ nhớ đệm của ổ đĩa ngay khi cần.

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

Đoạn mã HTML trước đó thông báo cho trình duyệt rằng đoạn mã đó có thể tìm nạp trước date-picker.jsdate-picker.css khi ở trạng thái rảnh. Bạn cũng có thể tìm nạp trước tài nguyên một cách linh động khi người dùng tương tác với trang JavaScript.

prefetch được hỗ trợ trên tất cả các trình duyệt hiện đại, ngoại trừ Safari (ở nơi hỗ trợ trình duyệt này) có sẵn phía sau một lá cờ. Nếu bạn rất cần phải tải trước cho trang web của mình theo cách hoạt động được trên mọi trình duyệt—và bạn đang sử dụng trình chạy dịch vụ—sau đó đọc phần sau trong mô-đun này về việc chuẩn bị bằng cách sử dụng trình chạy dịch vụ.

Tìm nạp trước các trang để tăng tốc các thao tác điều hướng trong tương lai

Cũng có thể tìm nạp trước một trang và tất cả các tài nguyên phụ của trang đó bằng cách chỉ định Thuộc tính as="document" khi trỏ đến một tài liệu HTML:

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

Khi ở trạng thái rảnh, trình duyệt có thể bắt đầu yêu cầu có mức độ ưu tiên thấp đối với /page.

Trong trình duyệt dựa trên Chromium, bạn có thể tìm nạp trước tài liệu bằng cách sử dụng API Quy tắc suy đoán. Quy tắc suy đoán được định nghĩa là một đối tượng JSON có trong HTML của trang hoặc được thêm động thông qua JavaScript:

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

Đối tượng JSON mô tả một hoặc nhiều thao tác (hiện chỉ hỗ trợ) prefetchprerender, cùng danh sách URL liên kết với hành động đó. Trong đoạn mã HTML trước đó, trình duyệt sẽ được hướng dẫn tìm nạp trước /page-a/page-b. Tương tự như <link rel="prefetch">, quy tắc suy đoán là gợi ý rằng trình duyệt có thể bỏ qua trong một số trường hợp nhất định.

Các thư viện như Quicklink cải thiện điều hướng trang bằng cách linh động tìm nạp trước hoặc kết xuất trước liên kết đến trang sau khi chúng hiển thị trong khung nhìn của người dùng. Điều này làm tăng khả năng người dùng chuyển đến trang đó – so với việc tìm nạp trước tất cả các đường liên kết trên trang.

Trang kết xuất trước

Ngoài việc tìm nạp trước tài nguyên, bạn cũng có thể gợi ý cho trình duyệt để kết xuất trước một trang trước khi người dùng truy cập vào trang đó. Điều này có thể giúp phân phối gần như tải trang tức thì vì trang và các tài nguyên trên trang được tìm nạp và xử lý trong nền. Khi người dùng chuyển đến trang, trang đó sẽ được đặt trong nền trước.

Kết xuất trước được hỗ trợ thông qua Speculation Rules API (API Quy tắc suy đoán):

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

Tìm nạp trước và kết xuất trước bản minh hoạ

Đang lưu vào bộ nhớ đệm của trình chạy dịch vụ

Bạn cũng có thể tìm nạp trước các tài nguyên theo suy đoán bằng cách sử dụng service worker. Tính năng lưu vào bộ nhớ đệm của trình chạy dịch vụ có thể tìm nạp và lưu tài nguyên bằng cách sử dụng API Cache, cho phép trình duyệt phân phát yêu cầu bằng cách sử dụng API Cache mà không phải truy cập mạng. Việc chuẩn bị trình chạy dịch vụ sử dụng một trình chạy dịch vụ rất hiệu quả chiến lược lưu vào bộ nhớ đệm, hay còn gọi là chiến lược chỉ lưu vào bộ nhớ đệm. Mẫu này có hiệu lực bởi vì khi tài nguyên được đặt vào bộ nhớ đệm của trình chạy dịch vụ, chúng được tìm nạp gần như ngay lập tức theo yêu cầu.

Hiển thị luồng lưu vào bộ nhớ đệm của trình chạy dịch vụ từ trang, trình chạy dịch vụ, vào bộ nhớ đệm.
Chiến lược chỉ dành cho bộ nhớ đệm chỉ truy xuất tài nguyên đủ điều kiện từ mạng trong quá trình cài đặt của trình chạy dịch vụ. Sau khi cài đặt, tài nguyên chỉ được truy xuất từ bộ nhớ đệm của trình chạy dịch vụ.

Để lưu trước tài nguyên trong bộ nhớ đệm bằng một trình chạy dịch vụ, bạn có thể dùng Hộp công việc. Nếu bạn Tuy nhiên, bạn có thể tự viết mã để lưu vào bộ nhớ đệm một tập hợp tệp. Dù bằng cách nào, bạn quyết định sử dụng trình chạy dịch vụ để lưu trước bộ nhớ đệm tài nguyên khác, điều quan trọng là phải biết rằng quá trình lưu trước vào bộ nhớ đệm diễn ra khi dịch vụ worker đã được cài đặt. Sau khi cài đặt, các tài nguyên được lưu trước trong bộ nhớ đệm sẽ có sẵn để truy xuất trên bất kỳ trang nào mà trình chạy dịch vụ kiểm soát trên trang web của bạn.

Workbox sử dụng tệp kê khai bộ nhớ đệm trước để xác định tài nguyên nào cần được được lưu trước vào bộ nhớ đệm. Tệp kê khai trước bộ nhớ đệm là danh sách các tệp và thông tin về phiên bản đóng vai trò là "nguồn đáng tin cậy" cho các tài nguyên cần được lưu trước vào bộ nhớ đệm.

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

Mã trước đó là một tệp kê khai mẫu, bao gồm 2 tệp: script.ffaa4455.js/index.html. Nếu tài nguyên chứa phiên bản thông tin trong tệp (được gọi là hàm băm tệp), thì revision thuộc tính có thể được để là null, vì tệp đã được tạo phiên bản (ví dụ: ffaa4455 cho tài nguyên script.ffaa4455.js trong mã trước). Cho không được tạo phiên bản, bạn có thể tạo bản sửa đổi cho chúng tại thời điểm xây dựng.

Sau khi thiết lập, service worker có thể được sử dụng để lưu trước các trang tĩnh hoặc để tăng tốc các thao tác điều hướng trang tiếp theo.

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

Ví dụ: trên trang thông tin sản phẩm thương mại điện tử, bạn có thể sử dụng trình chạy dịch vụ lưu trước trong bộ nhớ đệm CSS và JavaScript cần thiết để hiển thị trang chi tiết sản phẩm, giúp người dùng chuyển đến trang chi tiết sản phẩm nhanh hơn nhiều. Trong ví dụ trước, product-page.ac29.cssproduct-page.39a1.js là được lưu trước vào bộ nhớ đệm. Phương thức precacheAndRoute có trong workbox-precaching tự động đăng ký các trình xử lý cần thiết để đảm bảo các tài nguyên được lưu trước trong bộ nhớ đệm được tìm nạp từ API trình chạy dịch vụ bất cứ khi nào cần thiết.

service worker được hỗ trợ rộng rãi, nên bạn có thể sử dụng service worker lưu trữ dữ liệu trên bất kỳ trình duyệt hiện đại nào trong tình huống cần thiết.

Kiểm tra kiến thức của bạn

Gợi ý prefetch xuất hiện ở mức độ ưu tiên nào?

Thấp.
Cao.
Trung bình.

Sự khác biệt giữa tìm nạp trướchiển thị trước một trang?

Hầu như chúng giống nhau, chỉ có một kết xuất trước sẽ nhận được tất cả trong khi quá trình tìm nạp trước thì không.
Mặc dù cả quá trình tìm nạp trước và kết xuất trước cho một trang đều nhận được một trang và tất cả thì quá trình tìm nạp trước chỉ truy xuất trang và tất cả trong khi quá trình kết xuất trước tiến thêm một bước bằng cách hiển thị toàn bộ trang nền cho đến khi người dùng điều hướng đến nó.

Bộ nhớ đệm của trình chạy dịch vụ và bộ nhớ đệm HTTP là giống nhau.

Sai
Đúng

Tiếp theo: Tổng quan về nhân viên web

Giờ thì bạn đã biết cách tìm nạp trước, kết xuất trước và lưu trước vào bộ nhớ đệm của trình chạy dịch vụ có thể mang lại lợi ích trong việc đẩy nhanh quá trình điều hướng trong tương lai bạn có thể đưa ra một số quyết định sáng suốt về việc làm thế nào có lợi cho trang web và người dùng trang web.

Tiếp theo, chúng tôi sẽ cung cấp thông tin tổng quan về nhân viên web và cách họ có thể tốn kém hoạt động ngoài luồng chính và giúp luồng chính có thêm khoảng trống để tương tác của người dùng. Nếu đã bao giờ bạn tự hỏi mình có thể làm gì để tạo luồng nhiều khoảng trống hơn, thì hai mô-đun tiếp theo sẽ đáng để bạn dành thời gian!