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