Ư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 cần đến mà không làm chậm sự kiện onload của trang không? <link rel="preload"> giúp nhà phát triển web làm được đ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 cung cấp 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à không hoạt động cho đến khi được tham chiếu trong DOM, JavaScript hoặc CSS. Ví dụ: sau đây là một 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, như khi tệp tập lệnh đượ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>

Vậy điều gì đang xảy ra? Nhà phát triển web sẽ quen thuộc với thuộc tính href được sử dụng trong ví dụ đó, vì đây là thuộc tính 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ể là thuộc tính mới đối với bạn. Thuộc tính này đượ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, mức độ ưu tiên yêu cầu phù hợp, cũng như áp dụng mọi chỉ thị Chính sách bảo mật nội dung có liên quan có thể được áp dụng cho ngữ cảnh tài nguyên chính xác.

Tìm hiểu (nhiều) hơn

Yoav Weiss đã viết hướng dẫn chính xác về cách sử dụng <link rel="preload">. Nếu bạn thấy thú vị 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 anh ấy để tìm hiểu thêm về các 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ể và chưa bao giờ được triển khai trong các trình duyệt khác ngoài Chrome. Do đó, Chrome 50 ngừng hỗ trợ <link rel="subresource">.