Trang này được dịch bởi Cloud Translation API.

2 cách tìm nạp trước: <link> thẻ và tiêu đề HTTP

Demián Renzulli

Trong lớp học lập trình này, bạn sẽ triển khai quá trình tìm nạp trước theo hai cách: bằng <link rel="prefetch"> và bằng tiêu đề HTTP Link.

Ứng dụng mẫu là một trang web có trang đích khuyến mãi có chiết khấu đặc biệt cho áo thun bán chạy nhất của cửa hàng. Vì trang đích liên kết đến một sản phẩm duy nhất, nên bạn có thể yên tâm khi giả định rằng có nhiều người dùng sẽ chuyển đến trang chi tiết sản phẩm. Điều này làm cho trang sản phẩm trở thành lựa chọn lý tưởng để tìm nạp trước trên trang đích.

Đo lường hiệu suất

Trước tiên, hãy thiết lập hiệu suất cơ sở:

Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
Nhấp vào thẻ Mạng.
Trong danh sách thả xuống của mục Điều tiết, chọn 3G nhanh để mô phỏng loại kết nối chậm.
Để tải trang sản phẩm, hãy nhấp vào Mua ngay trong ứng dụng mẫu.

Trang product-details.html mất khoảng 600 mili giây để tải:

Bảng điều khiển mạng hiển thị thời gian tải cho product-details.html

Tìm nạp trước trang sản phẩm bằng `<link rel="prefetch">`

Để cải thiện khả năng di chuyển, hãy chèn thẻ prefetch vào trang đích để tìm nạp trước trang product-details.html:

Thêm phần tử <link> sau đây vào phần đầu của tệp views/index.html:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

Thuộc tính as là không bắt buộc nhưng bạn nên dùng vì thuộc tính này giúp trình duyệt đặt tiêu đề phù hợp và xác định xem tài nguyên đã có trong bộ nhớ đệm hay chưa. Các giá trị mẫu cho thuộc tính này bao gồm: document, script, style, font, image và khác.

Cách xác minh rằng tính năng tìm nạp trước đang hoạt động:

Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
Nhấp vào thẻ Mạng.
Trong danh sách thả xuống của mục Điều tiết, chọn 3G nhanh để mô phỏng loại kết nối chậm.
Bỏ chọn hộp kiểm Tắt bộ nhớ đệm.
Tải lại ứng dụng.

Bây giờ, khi trang đích tải, trang product-details.html cũng sẽ tải, nhưng ở mức ưu tiên thấp nhất:

Bảng điều khiển mạng hiển thị product-details.html đã tìm nạp trước.

Trang được lưu giữ trong bộ nhớ đệm HTTP trong 5 phút, sau đó các quy tắc Cache-Control thông thường cho tài liệu sẽ được áp dụng. Trong trường hợp này, product-details.html có tiêu đề cache-control với giá trị public, max-age=0, nghĩa là trang được lưu giữ trong tổng cộng 5 phút.

Đánh giá lại hiệu suất

Tải lại ứng dụng.
Để tải trang sản phẩm, hãy nhấp vào Mua ngay trong ứng dụng mẫu.

Hãy xem bảng điều khiển Mạng. Có hai điểm khác biệt so với hoạt động theo dõi mạng ban đầu:

Cột Kích thước cho thấy "bộ nhớ đệm tìm nạp trước", có nghĩa là tài nguyên này được truy xuất từ bộ nhớ đệm của trình duyệt chứ không phải từ mạng.
Cột Thời gian cho biết thời gian để tải tài liệu hiện là khoảng 10 mili giây.

Phiên bản này giảm khoảng 98% so với phiên bản trước, mất khoảng 600 mili giây.

Bảng điều khiển mạng hiển thị product-details.html được truy xuất từ bộ nhớ đệm tìm nạp trước.

Điểm cộng: Sử dụng `prefetch` dưới dạng tính năng nâng cao theo mức độ tăng dần

Tính năng tìm nạp trước được triển khai tốt nhất dưới dạng cải tiến tăng dần cho người dùng đang duyệt web trên các kết nối nhanh. Bạn có thể sử dụng API thông tin mạng để kiểm tra điều kiện mạng và dựa trên việc tự động chèn thẻ tìm nạp trước. Bằng cách đó, bạn có thể giảm thiểu mức sử dụng dữ liệu và tiết kiệm chi phí cho người dùng khi dùng các gói dữ liệu có tốc độ chậm hoặc đắt đỏ.

Để triển khai tính năng tìm nạp trước thích ứng, trước tiên, hãy xoá thẻ <link rel="prefetch"> khỏi views/index.html:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

Sau đó, hãy thêm mã sau vào public/script.js để khai báo một hàm tự động chèn thẻ prefetch khi người dùng đang sử dụng kết nối nhanh:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

Hàm này hoạt động như sau:

Thao tác này kiểm tra thuộc tính effectiveType của API thông tin mạng để xác định xem người dùng có đang sử dụng kết nối 4G (hoặc nhanh hơn) không.
Nếu điều kiện đó được đáp ứng, thì hệ thống sẽ tạo một thẻ <link> với loại gợi ý là prefetch, chuyển URL sẽ được tìm nạp trước trong thuộc tính href, đồng thời cho biết tài nguyên là một HTML document trong thuộc tính as.
Cuối cùng, công cụ này sẽ tự động chèn tập lệnh vào head của trang.

Tiếp theo, thêm script.js vào views/index.html, ngay trước thẻ đóng </body>:

<body>
      ...
      <script src="/script.js"></script>
</body>

Việc yêu cầu script.js ở cuối trang giúp đảm bảo rằng yêu cầu này sẽ được tải và thực thi sau khi trang được phân tích cú pháp và tải.

Để đảm bảo rằng quá trình tìm nạp trước không ảnh hưởng đến các tài nguyên quan trọng của trang hiện tại, hãy thêm đoạn mã sau đây để gọi injectLinkPrefetchIn4g() trên sự kiện window.load:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

Trang đích hiện chỉ tìm nạp trước product-details.html trên các kết nối nhanh. Cách xác minh:

Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
Nhấp vào thẻ Mạng.
Trong danh sách thả xuống Điều tiết, chọn Trực tuyến.
Tải lại ứng dụng.

Bạn sẽ thấy product-details.html trong bảng điều khiển Mạng:

Bảng điều khiển mạng hiển thị product-details.html đã tìm nạp trước.

Cách xác minh để đảm bảo rằng trang sản phẩm không được tìm nạp trước trên các kết nối chậm:

Trong danh sách thả xuống Điều tiết lưu, hãy chọn 3G chậm.
Tải lại ứng dụng.

Bảng Mạng chỉ được bao gồm các tài nguyên của trang đích không có product-details.html:

Bảng điều khiển mạng hiển thị product-details.html không được tìm nạp trước.

Tìm nạp trước biểu định kiểu cho trang sản phẩm có tiêu đề HTTP `Link`

Bạn có thể dùng tiêu đề HTTP Link để tìm nạp trước cùng loại tài nguyên như thẻ link. Việc quyết định thời điểm sử dụng một trong hai cách này chủ yếu phụ thuộc vào lựa chọn ưu tiên của bạn, vì sự khác biệt về hiệu suất là không đáng kể. Trong trường hợp này, bạn sẽ dùng CSS này để tìm nạp trước CSS chính của trang sản phẩm nhằm cải thiện quá trình hiển thị.

Thêm tiêu đề HTTP Link cho style-product.css trong phản hồi của máy chủ cho trang đích:

Mở tệp server.js rồi tìm trình xử lý get() cho URL gốc: /.
Thêm dòng sau vào đầu trình xử lý:

app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});

Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
Nhấp vào thẻ Mạng.
Tải lại ứng dụng.

style-product.css hiện được tìm nạp trước ở mức độ ưu tiên thấp nhất sau khi trang đích tải:

Bảng điều khiển mạng hiển thị đã tìm nạp trước style-product.css.

Để chuyển đến trang sản phẩm, hãy nhấp vào Mua ngay. Hãy xem bảng điều khiển Mạng:

Bảng điều khiển mạng hiển thị style-product.css được truy xuất từ bộ nhớ đệm tìm nạp trước.

Tệp style-product.css được truy xuất từ "bộ nhớ đệm tìm nạp trước" và chỉ mất 12 mili giây để tải.

Lưu ý: Khi sử dụng tiêu đề HTTP Link, bạn có thể quyết định xem có tìm nạp trước hay không tuỳ thuộc vào điều kiện mạng dựa trên thông tin có trong gợi ý của ứng dụng.