<link>元素的 rel 屬性的屬性值preload能夠讓HTML頁面中 <head>元素內部書寫一些聲明式的資源獲取請求，使得資源可以更早的得到加載。
在這里，我們會先加載style1.css和main1.js文件(但不會生效)，在隨后的頁面渲染中，一旦需要使用它們，它們就會立即可用。
哪些類型的內容可以被預加載？
許多不同類型的內容都可以被預加載，一些主要可用的as?屬性值列舉如下：
audio: 音頻文件。document: 一個將要被嵌入到<frame>或<iframe>內部的HTML文檔。embed: 一個將要被嵌入到<embed>元素內部的資源。fetch: 那些將要通過fetch和XHR請求來獲取的資源，比如一個ArrayBuffer或JSON文件。font: 字體文件。image: 圖片文件。object: 一個將會被嵌入到<embed>元素內的文件。script: JavaScript文件。style: 樣式表。track: WebVTT文件。worker: 一個JavaScript的web worker或shared worker。video: 視頻文件。
媒體查詢
<link>元素有一個很棒的特性是它們能夠接受一個media作為屬性值，這將令你能夠使用響應式的預加載
跨域獲取
通過添加crossorigin="anonymous"支持跨域,對于字體文件是個特例,無論何時,字體文件都需要添加該屬性
其他資源預加載機制
<link rel="prefetch">?已經被許多瀏覽器支持了相當長的時間，它是意圖預獲取一些資源，以備下一個導航/頁面使用。這很好，但對當前的頁面并沒有什么助益。此外，瀏覽器會給使用prefetch的資源一個相對較低的優先級——與使用preload的資源相比。
查看Link prefetching FAQ可以了解更多細節。
文章為作者獨立觀點，不代表DLZ123立場。如有侵權,請聯系我們。( 版權為作者所有，如需轉載，請聯系作者 )
網站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
