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 JavaScript và hì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.js và date-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ợ)
prefetch và prerender, 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
và /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.
Để 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 và /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.css và product-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.
Vì 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?
Sự khác biệt giữa tìm nạp trước và hiển thị trước một trang?
Bộ nhớ đệm của trình chạy dịch vụ và bộ nhớ đệm HTTP là giống nhau.
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!