日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

在性能優(yōu)化中有一種手段叫做預(yù)加載，從字面意思理解就是提前加載頁面所依賴的資源，在網(wǎng)絡(luò)請求中，我們在使用到某些資源如：圖片，JS，CSS等，在執(zhí)行前總需要等待資源的下載，若我們能做到預(yù)先加載資源，則在資源執(zhí)行的時(shí)候就不必等待網(wǎng)絡(luò)的開銷，從而可以達(dá)到加快渲染的效果。而預(yù)加載常用的屬性主要有兩個(gè)：「preload」、「prefetch」。

preload 提前加載?

Preload主要是讓瀏覽器提前加載資源（加載后并不會(huì)立即執(zhí)行），然后會(huì)在需要執(zhí)行的時(shí)候執(zhí)行。并且 onload 事件必須等頁面所有資源都加載完成才觸發(fā)，而當(dāng)給某個(gè)資源加上 preload 后，該資源將不會(huì)阻塞 onload。

如何使用

• 通過link標(biāo)簽創(chuàng)建

• 在HTTP響應(yīng)頭中加上preload字段

Link: ; rel=preload; as=style

體驗(yàn)

比如頁面同時(shí)加載了兩個(gè)JS文件

正常來講它們的加載順訊應(yīng)該與書寫順序一致。

我們給b.js配置預(yù)加載

再來看一下它倆的加載順序：

此時(shí)b.js已經(jīng)在a.js之前進(jìn)行加載了。

加載資源類型

preload 除了能夠預(yù)加載腳本之外，還可以通過 as 指定別的資源類型，比如：

• style 樣式表
• font：字體文件
• image：圖片文件
• audio：音頻文件
• video：視頻文件
• document：文檔

應(yīng)用

「預(yù)加載字體」

preload比較常見的使用場景是用于字體文件的預(yù)加載，開發(fā)過程中處于對設(shè)計(jì)的高度還原，我們可能會(huì)使用自定義字體。但在使用過程中我們往往會(huì)遇到下面這種現(xiàn)象，頁面首次加載時(shí)文字會(huì)出現(xiàn)短暫的字體樣式閃動(dòng)（FOUT，F(xiàn)lash of Unstyled Text），在網(wǎng)絡(luò)情況較差時(shí)更加明顯。主要原因是字體文件由css引入，在css解析后才會(huì)進(jìn)行加載，加載完成之前瀏覽器只能使用降級字體。也就是說，字體文件加載的時(shí)機(jī)太遲，需要告訴瀏覽器提前進(jìn)行加載，這恰恰是preload的用武之地。

當(dāng)我們?yōu)樽煮w文件加上預(yù)加載后再來看看效果

再次刷新頁面，我們可以看到頁面沒有出現(xiàn)文字樣式閃動(dòng)了，并且我們在network面板中可以看到字體文件的加載時(shí)機(jī)提前了，在瀏覽器請求html后很快就開始加載字體文件了。

兼容性判斷

const isPreloadSupported = () => {
  const link = document.createElement('link');
  const relList = link.relList;

  if (!relList || !relList.supports) {
    return false;
  }

  return relList.supports('preload');
};

prefetch 預(yù)判加載?

preload 用于提前加載用于當(dāng)前頁面的資源，而 prefetch 則是用于加載未來（比如下一個(gè)頁面）會(huì)用到的資源，并且告訴瀏覽器在空閑的時(shí)候去下載，它會(huì)將下載資源的優(yōu)先級降到最低。

如何使用

• 通過link標(biāo)簽創(chuàng)建

• 在HTTP響應(yīng)頭中加上preload字段

Link: ; rel=prefetch; as=style

體驗(yàn)

還是上面這個(gè)例子

正常來講它們的加載順訊應(yīng)該與書寫順序一致。

我們給a.js配置prefetch

再來看一下它倆的加載順序：

此時(shí)我們會(huì)發(fā)現(xiàn)a.js的加載優(yōu)先級已經(jīng)降到最低了，當(dāng)資源被下載完成后，會(huì)被存到瀏覽器緩存中，當(dāng)從首頁跳轉(zhuǎn)到頁面 A 的時(shí)候，假如頁面 A 中引入了該腳本，那么瀏覽器會(huì)直接從 prefetch cache 中讀取該資源，從而實(shí)現(xiàn)資源加載優(yōu)化。

總結(jié)?

• preload  是告訴瀏覽器頁面「必定」需要的資源，瀏覽器「一定會(huì)」加載這些資源
• prefetch 是告訴瀏覽器頁面「可能」需要的資源，瀏覽器「不一定會(huì)」加載這些資源
• preload與prefetch都僅僅是加載資源，并不會(huì)執(zhí)行
• preload比prefetch優(yōu)先級更高，prefetch比preload的兼容性更好
• preload與prefetch都不會(huì)阻塞頁面的onload
• preload的字體資源必須設(shè)置crossorigin屬性，否則會(huì)導(dǎo)致重復(fù)加載

當(dāng)前名稱：徹底搞懂預(yù)加載屬性Preload與Prefetch
標(biāo)題路徑：http://www.dlmjj.cn/article/dhocpgs.html