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