Có bao giờ bạn muốn cho trình duyệt biết về một phông chữ, tập lệnh quan trọng hoặc tài nguyên khác mà trang sẽ cần mà không làm trì hoãn sự kiện onload của trang không? <link rel="preload"> cung cấp cho các nhà phát triển web sức mạnh để làm việc đó, 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à tiêu chuẩn nháp được vận chuyển trong bản phát hành Chrome 50.
Các tài nguyên tải qua <link rel="preload"> được lưu trữ cục bộ trong trình duyệt và được lưu trữ một cách hiệu quả cho đến khi chúng được tham chiếu trong DOM, JavaScript hoặc CSS. Ví dụ: đây là trường hợp sử dụng tiềm năng, 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, vì sẽ 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 sử dụng trong ví dụ trên 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 đối với bạn. Tuy nhiên, thuộc tính này được dùng trong ngữ cảnh của phần tử <link> nhằm 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 phù 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ể áp dụng cho đúng ngữ cảnh tài nguyên.
Tìm hiểu (rất nhiều) thêm
Yoav Weiss đã viết hướng dẫn chính thức về cách sử dụng <link rel="preload">. Nếu hứng thú và muốn bắt đầu sử dụng tính năng này
trên các trang của mình, bạn nên đọc qua bài viết của ông để tìm hiểu thêm về
các lợi ích và trường hợp sử dụng sáng tạo.
Tạm biệt <link rel="subresource">
<link rel="preload"> thay thế <link rel="subresource"> có các lỗi và hạn chế đáng kể, đồng thời chưa từng được triển khai trong các trình duyệt khác ngoài Chrome. Do đó, Chrome 50
sẽ ngừng hỗ trợ
<link rel="subresource">.