Trong một vài mô-đun gần đây nhất, bạn đã phát hiện các khái niệm như trì hoãn tải JavaScript, hình ảnh tải từng phần và phần tử <iframe>.
Việc trì hoãn việc tải tài nguyên làm giảm mức sử dụng mạng và CPU trong lần tải trang ban đầu, bằng cách tải tài nguyên xuống tại thời điểm cần thiết, thay vì tải lên trước (nơi những tài nguyên có thể không dùng đến).
Việc này có thể giúp cải thiện thời gian tải trang ban đầu, nhưng các hoạt động tương tác tiếp theo có thể bị trễ nếu tài nguyên cần thiết để hỗ trợ trang chưa được tải tại thời điểm xảy ra hoạt động.
Ví dụ: nếu một trang chứa bộ chọn ngày tuỳ chỉnh, thì bạn có thể trì hoãn tài nguyên của bộ chọn ngày 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 của bộ chọn ngày theo yêu cầu có thể làm chậm trễ (có thể là hơi ít nhưng cũng có thể 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 cả hai — cho đến khi các tài nguyên được tải xuống, phân tích cú pháp và sẵn sàng để thực thi.
Đây là một cách cân bằng khó khăn – bạn không muốn lãng phí băng thông bằng cách tải các tài nguyên có thể không dùng đến. Tuy nhiên, việc trì hoãn các lượt tương tác và các lần tải trang tiếp theo cũng có thể không 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 trường hợp này. Mô-đun này đề cập đến một số kỹ thuật mà 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, kết xuất trước toàn bộ trang và lưu trước tài nguyên vào bộ nhớ đệm bằ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 ở mức độ ưu tiên thấp
Bạn có thể tìm nạp trước cá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">. Gợi ý prefetch thông báo cho trình duyệt biết rằng có thể sẽ cần tài nguyên 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 đó ở mức độ ưu tiên thấp nhất để tránh cạnh tranh với các tài nguyên cần thiết cho 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 cần phải đợi tải tài nguyên cần thiết trong tương lai gần xuống, mà có thể truy xuất ngay các tài nguyên đó từ bộ nhớ đệm trên ổ đĩa 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 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 trong 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 trình duyệt này xuất hiện sau khi gắn cờ. Nếu bạn thực sự cần phải tải trước các tài nguyên cho trang web của mình theo cách hoạt động trên mọi trình duyệt (và bạn đang sử dụng một trình chạy dịch vụ), hãy đọc phần sau trong mô-đun này về việc lưu trước tài nguyên bằng trình chạy dịch vụ.
Tìm nạp trước trang để tăng tốc độ di chuyển trong tương lai
Bạn 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 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 một yêu cầu có mức độ ưu tiên thấp cho /page.
Trong các 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 Speculation Rules API. 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) và một danh sách URL liên kết với thao tác đó. Trong đoạn mã HTML trước đó, trình duyệt được hướng dẫn tìm nạp trước /page-a và /page-b. Tương tự như <link rel="prefetch">, các quy tắc suy đoán là một gợi ý mà 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ư Liên kết nhanh cải thiện khả năng điều hướng trang bằng cách tự động tìm nạp trước hoặc kết xuất trước đường liên kết tới các trang khi các trang đó 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 cuối cùng sẽ 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 chuyển đến trang đó. Việc này có thể giúp tải trang gần như ngay lập tức vì trang và tài nguyên trên trang được tìm nạp và xử lý trong nền. Khi người dùng truy cập vào trang, trang đó sẽ được đặt ở nền trước.
Quá trình kết xuất trước được hỗ trợ thông qua Speculation Rules API:
<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ạ
Dịch vụ lưu trước 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 cách suy đoán bằng cách sử dụng service worker.
Tính năng lưu trước trên 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 cần chuyển đến mạng. Tính năng lưu trước trên bộ nhớ đệm của trình chạy dịch vụ sử dụng chiến lược lưu vào bộ nhớ đệm rất hiệu quả của trình chạy dịch vụ, được gọi là chiến lược chỉ lưu vào bộ nhớ đệm. Mẫu này có hiệu quả cao vì sau khi đặt tài nguyên vào bộ nhớ đệm của trình chạy dịch vụ, chúng sẽ được tìm nạp gần như ngay lập tức khi có yêu cầu.
Để lưu trước tài nguyên vào bộ nhớ đệm bằng trình chạy dịch vụ, bạn có thể sử dụng Hộp làm việc. Tuy nhiên, nếu muốn, bạn có thể viết mã của riêng mình để lưu vào bộ nhớ đệm một nhóm tệp đã xác định trước. 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 tài nguyên vào bộ nhớ đệm, bạn cũng cần phải biết rằng hoạt động lưu trước vào bộ nhớ đệm xảy ra khi trình chạy dịch vụ được cài đặt. Sau khi cài đặt, các tài nguyên đã lưu trước được lưu vào 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 lưu trước vào bộ nhớ đệm. Tệp kê khai bộ nhớ đệm là danh sách các tệp và thông tin phiên bản đóng vai trò là "nguồn đáng tin cậy" để các tài nguyên được lưu trước vào bộ nhớ đệm.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Mã ở trên là một tệp kê khai mẫu bao gồm hai tệp: script.ffaa4455.js và /index.html. Nếu một tài nguyên chứa thông tin phiên bản trong chính tệp đó (còn gọi là hàm băm tệp), thì thuộc tính revision 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). Đối với các tài nguyên không được phiên bản, bạn có thể tạo một bản sửa đổi cho các tài nguyên đó tại thời điểm xây dựng.
Sau khi thiết lập, bạn có thể dùng một trình chạy dịch vụ để lưu trước các trang tĩnh hoặc tài nguyên phụ của các trang đó vào bộ nhớ đệm nhằm tăng tốc các lần di chuyển trang tiếp theo.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Ví dụ: trên trang danh sách 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 vào bộ nhớ đệm CSS và JavaScript cần thiết để hiển thị trang chi tiết sản phẩm, giúp quá trình điều hướng đến trang chi tiết sản phẩm trở nên nhanh hơn nhiều. Trong ví dụ trước, product-page.ac29.css và product-page.39a1.js đượ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 tài nguyên được lưu trước trong bộ nhớ đệm được tìm nạp qua API trình chạy dịch vụ bất cứ khi nào cần thiết.
Vì trình chạy dịch vụ được hỗ trợ rộng rãi, nên bạn có thể sử dụng tính năng lưu trước trình chạy dịch vụ trên mọi trình duyệt hiện đại trong tình huống cần thiết.
Kiểm tra kiến thức
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à kết xuất trước một trang là gì?
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ề trình chạy web
Giờ đây, bạn đã biết việc tìm nạp trước, kết xuất trước và lưu trước trên bộ nhớ đệm của trình chạy dịch vụ có thể có lợi như thế nào trong việc tăng tốc độ điều hướng tới các trang trong tương lai, bạn đã có thể đưa ra một số quyết định có căn cứ về lợi ích mà việc này có thể mang lại cho trang web và người dùng trang web.
Tiếp theo, chúng tôi sẽ trình bày thông tin tổng quan về trình thực thi web, cũng như cách chúng có thể giúp giảm bớt công việc tốn kém trong luồng chính và mang lại cho luồng chính nhiều không gian hơn để tương tác của người dùng. Nếu bạn đã từng tự hỏi mình có thể làm gì để giúp luồng chính có thêm không gian, thì 2 mô-đun tiếp theo rất đáng để bạn dành thời gian!