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

Demián Renzulli
Demián Renzulli
X GitHub Nhiễu

Trong lớp học lập trình này, bạn sẽ triển khai tính năng tải 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 quảng bá với chương trình giảm giá đặc biệt cho chiếc áo phông 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 có thể giả định rằng tỷ lệ phần trăm người dùng cao sẽ chuyển đến trang chi tiết sản phẩm. Điều này khiến trang sản phẩm trở thành một phương án 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ở:

  1. Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
  2. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.
  3. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.

  4. Nhấp vào thẻ Mạng.

  5. Trong danh sách thả xuống Tăng tốc, chọn 3G nhanh để mô phỏng loại kết nối chậm.

  6. Để 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 điều hướng, hãy chèn thẻ prefetch vào trang đích để tải trước trang product-details.html:

  • Thêm phần tử <link> sau vào đầu 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>

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

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

  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.
  2. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.

  3. Nhấp vào thẻ Mạng.

  4. Trong danh sách thả xuống Throttling (Giới hạn), hãy chọn Fast 3G (3G nhanh) để mô phỏng loại kết nối chậm.

  5. Bỏ đánh dấu hộp đánh dấu Tắt bộ nhớ đệm.

  6. Tải lại ứng dụng.

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

Bảng điều khiển mạng cho thấy product-details.html được tìm nạp trước.

Trang được lưu 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 mang giá trị public, max-age=0, tức là trang được lưu giữ tổng cộng 5 phút.

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

  1. Tải lại ứng dụng.
  2. Để 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 dấu vết mạng ban đầu:

  • Cột Kích thước cho thấy "bộ nhớ đệm tìm nạp trước", nghĩa là tài nguyên này được truy xuất từ bộ nhớ đệm của trình duyệt thay vì 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.

Đây là mức 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 thưởng: Sử dụng prefetch làm tính năng cải tiến tăng dần

Tốt nhất là bạn nên triển khai tính năng tìm nạp trước dưới dạng một tính năng nâng cao dần cho những người dùng đang duyệt web trên các kết nối nhanh. Bạn có thể sử dụng Network Information API để kiểm tra các điều kiện mạng và dựa trên đó chèn động 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 sử dụng gói dữ liệu 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 hàm chèn động 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:

  • Phương thức này kiểm tra thuộc tính effectiveType của Network Information API (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) hay không.
  • Nếu điều kiện đó được đáp ứng, thì thuộc tính này sẽ tạo một thẻ <link> với prefetch làm loại gợi ý, chuyển URL sẽ được tìm nạp trước trong thuộc tính href và cho biết tài nguyên là document HTML trong thuộc tính as.
  • Cuối cùng, công cụ này sẽ chèn tập lệnh một cách linh động vào head của trang.

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

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

Việc yêu cầu script.js ở cuối trang đảm bảo rằng tệp 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 tính năng tải 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 để 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>

Giờ đây, trang đích chỉ tải trước product-details.html trên các kết nối nhanh. Cách xác minh rằng:

  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.
  2. 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.
  3. Nhấp vào thẻ Mạng.
  4. Trong danh sách thả xuống Điều tiết, chọn Trực tuyến.
  5. 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 cho thấy product-details.html được tìm nạp trước.

Cách xác minh 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:

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

Bảng điều khiển Mạng chỉ nên bao gồm các tài nguyên cho trang đích không có product-details.html:

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

Tải trước tệp định kiểu cho trang sản phẩm bằng tiêu đề HTTP Link

Bạn có thể sử dụng tiêu đề HTTP Link để tải trước cùng một 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 phương thức 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ẽ sử dụng tính năng này để tải trước CSS chính của trang sản phẩm, nhằm cải thiện khả năng hiển thị của trang.

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

  1. Mở tệp server.js và tìm trình xử lý get() cho URL gốc: /.
  2. 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');
});
  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.
  2. 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.
  3. Nhấp vào thẻ Mạng.
  4. 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ị style-product.css được tìm nạp trước.

Để 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ải trước" và chỉ mất 12 mili giây để tải.