Ư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 khác mà trang cần đến mà không trì hoãn thời gian onload sự kiện? <link rel="preload"> giúp các nhà phát triển web có thể thực hiện sử dụng cú pháp phần tử HTML quen thuộc cùng với một vài thuộc tính chính để xác định hành vi chính xác. Đó là tiêu chuẩn nháp, tức là vận chuyển theo Bản phát hành Chrome 50.

Tài nguyên được tải qua <link rel="preload"> sẽ được lưu trữ cục bộ trong trình duyệt, và trơ hiệu quả cho đến khi chúng được tham chiếu trong DOM, JavaScript hoặc Dịch vụ so sánh giá (CSS). Ví dụ: đâ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ư lẽ ra đã có thể được đưa vào 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ụ đó nên quen thuộc với các nhà phát triển web, vì đây là thuộc tính chuẩn dùng để chỉ định URL của bất kỳ tài nguyên được liên kết nào.

Thuộc tính as là tuy nhiên, có thể còn mới mẻ và được dùng trong bối cảnh phần tử <link> để cung cấp cho trình duyệt thêm ngữ cảnh về đích đến của đang thực hiện yêu cầu tải trước. 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ính sách bảo mật nội dung có liên quan có thể dùng để hỗ trợ đúng ngữ cảnh tài nguyên.

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

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

<link rel="preload"> thay thế <link rel="subresource">, vốn có lỗi và hạn chế đáng kể, và mà chưa bao giờ được triển khai trong các trình duyệt khác ngoài Chrome. Do đó, Chrome 50 xoá chế độ hỗ trợ cho <link rel="subresource">.