Ưu tiên tài nguyên của bạn bằng đường liên kết rel=#39;preorder'

Jeff Posnick

Bạn đã bao giờ muốn cho trình duyệt biết về một phông chữ, tập lệnh hoặc tài nguyên quan trọng khác mà trang sẽ cần đến mà không trì hoãn sự kiện onload của trang chưa? <link rel="preload"> mang lại cho các nhà phát triển web quyền làm điều đó bằng cách sử dụng cú pháp phần tử HTML quen thuộc với một vài thuộc tính chính để xác định hành vi chính xác. Đây là một tiêu chuẩn nháp được triển khai trong bản phát hành Chrome 50.

Các tài nguyên được tải qua <link rel="preload"> được lưu trữ cục bộ trong trình duyệt và được lưu trữ hiệu quả cho đến khi chúng được tham chiếu trong DOM, JavaScript hoặc CSS. Ví dụ: dưới đây là một trường hợp sử dụng có thể xảy ra, trong đó tệp tập lệnh được tải trước nhưng không được thực thi ngay lập tức, như đã xảy ra nếu tệp này được đưa vào thông qua thẻ <script> trong DOM.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

Điều gì sẽ xảy ra ở đây? Thuộc tính href được dùng trong ví dụ đó chắc hẳn quen thuộc với các nhà phát triển web, vì đây là thuộc tính tiêu chuẩn dùng để chỉ định URL của mọi tài nguyên được liên kết.

Tuy nhiên, thuộc tính as có thể còn mới mẻ và được dùng trong ngữ cảnh của phần tử <link> để cung cấp cho trình duyệt thêm ngữ cảnh về đích đến của yêu cầu tải trước đang được thực hiện. Thông tin bổ sung này đảm bảo rằng trình duyệt sẽ đặt tiêu đề yêu cầu thích hợp, mức độ ưu tiên của yêu cầu, cũng như áp dụng mọi chỉ thị có liên quan trong Chính sách bảo mật nội dung có thể được áp dụng cho ngữ cảnh tài nguyên chính xác.

Tìm hiểu thêm (rất nhiều)

Yoav Weiss đã viết hướng dẫn cuối cùng về cách sử dụng <link rel="preload">. Nếu bạn quan tâm và muốn bắt đầu sử dụng tính năng này trên các trang của riêng mình, bạn nên đọc bài viết của ông để tìm hiểu thêm về những lợi ích và trường hợp sử dụng sáng tạo.

<link rel="preload"> thay thế <link rel="subresource"> có các lỗi và hạn chế đáng kể, chưa từng được triển khai trong các trình duyệt không phải Chrome. Do đó, Chrome 50 sẽ xoá sự hỗ trợ của <link rel="subresource">.