HTML có một thuộc tính được gọi là preload cho phép bạn cung cấp cho trình duyệt một gợi ý về cách thức và quan trọng hơn là khi nào để tải nội dung khi tải trang.
preload thuộc tính có thể được sử dụng trên một số phần tử HTML. Ví dụ:bạn có thể thêm nó vào <link> để làm cho trình duyệt bắt đầu tìm nạp sớm cho biểu định kiểu CSS của bạn.
Đừng sử dụng preload thuộc tính trên <link> của bạn như thế này (như một số trang web đề xuất):
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">Bởi vì mã ở trên chỉ tải trước biểu định kiểu của bạn, nó không áp dụng nó.
Thay vào đó, để tải trước và áp dụng biểu định kiểu của bạn (ngay sau khi nó được tải trước), bạn có thể sử dụng một JS onload nội tuyến trình xử lý sự kiện trên <link> của bạn phần tử:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
JS onload eventhandler sau đó sẽ thay đổi rel="preload" của phần tử liên kết thuộc tính cho rel="stylesheet" ngay sau khi tải xong.
Với cấu hình ở trên, các trình duyệt hỗ trợ preload sẽ bắt đầu tải xuống biểu định kiểu CSS sớm hơn nếu bạn không sử dụng thuộc tính.
Hỗ trợ trình duyệt
preload Thuộc tính chưa được hỗ trợ trong Firefox (kỳ lạ), nhưng nó hoạt động trên tất cả các trình duyệt hiện đại khác. Bạn vẫn có thể sử dụng preload nhưng nó sẽ không tìm nạp trước CSS của bạn trong Firefox (nó sẽ tải bình thường).