成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

preload、prefetch的認(rèn)識(shí)

alogy / 3047人閱讀

摘要：和可以用來(lái)指定資源是最高優(yōu)先級(jí)的。如果用戶進(jìn)入指定的鏈接，隱藏的這個(gè)頁(yè)面就會(huì)進(jìn)入馬上進(jìn)入用戶的視線。微軟最近也宣布會(huì)讓在上用類似的技術(shù)。

預(yù)加載

現(xiàn)在的網(wǎng)絡(luò)情況雖然很樂(lè)觀，但是

defer和async

當(dāng)瀏覽器碰到 script 腳本的時(shí)候：

沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。

有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。

有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

然后從實(shí)用角度來(lái)說(shuō)呢，首先把所有腳本都丟到 之前是最佳實(shí)踐，因?yàn)閷?duì)于舊瀏覽器來(lái)說(shuō)這是唯一的優(yōu)化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。

接著，我們來(lái)看一張圖咯：

此圖告訴我們以下幾個(gè)要點(diǎn)：

defer 和 async 在網(wǎng)絡(luò)讀?。ㄏ螺d）這塊兒是一樣的，都是異步的（相較于 HTML 解析）

它倆的差別在于腳本下載完之后何時(shí)執(zhí)行，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的

關(guān)于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的，這一點(diǎn)要善加利用

async 則是一個(gè)亂序執(zhí)行的主，反正對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行

仔細(xì)想想，async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來(lái)說(shuō)卻是非常合適的，

preload和refetch

preload通常在頁(yè)面中，我們需要加載一些腳本和樣式，而使用 preload 可以對(duì)當(dāng)前頁(yè)面所需的腳本、樣式等資源進(jìn)行預(yù)加載，而無(wú)需等到解析到 script 和 link 標(biāo)簽時(shí)才進(jìn)行加載。這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁(yè)面的初步渲染，進(jìn)而提升性能。

使用方式
將 link 標(biāo)簽的 rel 屬性的值設(shè)為 preload，as 屬性的值為資源類型（如腳本為 script，樣式表為 style）


  
  preload example

prefetch與 preload 一樣，都是對(duì)資源進(jìn)行預(yù)加載，但是 prefetch 加載的資源一般不是用于當(dāng)前頁(yè)面的，即未來(lái)很可能用到的這樣一些資源，簡(jiǎn)單點(diǎn)說(shuō)就是其他頁(yè)面會(huì)用到的資源。當(dāng)然，prefetch 不會(huì)像 preload 一樣，在頁(yè)面渲染的時(shí)候加載資源，而是利用瀏覽器空閑時(shí)間來(lái)下載。當(dāng)進(jìn)入下一頁(yè)面，就可直接從 disk cache 里面取，既不影響當(dāng)前頁(yè)面的渲染，又提高了其他頁(yè)面加載渲染的速度。

使用方式
同 preload 很相似，無(wú)需指定 as 屬性：


  
  preload example

總結(jié):對(duì)當(dāng)前頁(yè)面需要的資源，使用 preload 進(jìn)行預(yù)加載，對(duì)其它頁(yè)面需要的資源進(jìn)行 prefetch 預(yù)加載。

Subresource和Prerender

subresource可以用來(lái)指定資源是最高優(yōu)先級(jí)的。比如，在Chrome和Opera中我們可以加上下面的代碼：

Chromium的文檔這么解釋：
和 "Link rel=prefetch"的語(yǔ)義不同，"Link rel=subresource"是一種新的連接關(guān)系。rel=prefetch指定了下載后續(xù)頁(yè)面用到資源的低優(yōu)先級(jí)，而rel=subresource則是指定當(dāng)前頁(yè)面資源的提前加載。

所以，如果資源是在當(dāng)前頁(yè)面需要，或者馬上就會(huì)用到，則推薦用subresource，否則還是用prefetch。

prerender是一個(gè)重量級(jí)的選項(xiàng)，它可以讓瀏覽器提前加載指定頁(yè)面的所有資源。

Steve Souders的文章詳細(xì)解釋了這個(gè)技術(shù)：
prerender就像是在后臺(tái)打開(kāi)了一個(gè)隱藏的tab，會(huì)下載所有的資源、創(chuàng)建DOM、渲染頁(yè)面、執(zhí)行JS等等。如果用戶進(jìn)入指定的鏈接，隱藏的這個(gè)頁(yè)面就會(huì)進(jìn)入馬上進(jìn)入用戶的視線。Google Search多年前就利用了這個(gè)特性實(shí)現(xiàn)了Instant Pages功能。微軟最近也宣布會(huì)讓Bing在IE11上用類似prerender的技術(shù)。

但是要注意，一定要在十分確定用戶回點(diǎn)某個(gè)鏈接時(shí)才用這個(gè)特性，否則客戶端就會(huì)無(wú)端的下載很多資源和渲染這個(gè)頁(yè)面。
正如任何提前的動(dòng)作一樣，預(yù)判總是有一定風(fēng)險(xiǎn)出錯(cuò)。如果提前的動(dòng)作是昂貴的（比如高CPU、耗電、占用帶寬），就要謹(jǐn)慎使用了。雖然不容易預(yù)判用戶會(huì)點(diǎn)進(jìn)哪個(gè)頁(yè)面，但還是存在一些典型的場(chǎng)景：

如果用戶搜索到了一個(gè)明顯正確的結(jié)果時(shí)，那么這個(gè)頁(yè)面就很有可能被點(diǎn)入
如果用戶在登錄頁(yè)面，那么登錄成功后的頁(yè)面就很可能接下來(lái)會(huì)被加載了
如果用戶在閱讀一個(gè)多頁(yè)面的文章或者有頁(yè)碼的內(nèi)容時(shí)，下一頁(yè)就很可能會(huì)馬上被點(diǎn)擊了
利用Page Visibility API可以用來(lái)防止頁(yè)面在還沒(méi)真正展示給用戶時(shí)就觸發(fā)了JS的執(zhí)行。

參考：
defer和async
prefetch與 preload
prefetch預(yù)加載
preload當(dāng)即加載
加載技術(shù)概述
dnc fetch

Prerender Subresource

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114181.html

相關(guān)文章

  • preload & prefetch

    摘要：搜索了相關(guān)的資料后對(duì)其有了些認(rèn)識(shí)，在此記錄一下。這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁(yè)面的初步渲染，進(jìn)而提升性能。當(dāng)進(jìn)入下一頁(yè)面，就可直接從里面取，既不影響當(dāng)前頁(yè)面的渲染，又提高了其他頁(yè)面加載渲染的速度。 原文地址在 我的筆記里，覺(jué)得還行就給個(gè) star 吧：） 關(guān)于 preload 和 prefetch 早有耳聞，知道它們可以優(yōu)化頁(yè)面加載速度，然具體情況卻了解不多。...

    daryl 評(píng)論0 收藏0

  • preload & prefetch

    摘要：搜索了相關(guān)的資料后對(duì)其有了些認(rèn)識(shí)，在此記錄一下。這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁(yè)面的初步渲染，進(jìn)而提升性能。當(dāng)進(jìn)入下一頁(yè)面，就可直接從里面取，既不影響當(dāng)前頁(yè)面的渲染，又提高了其他頁(yè)面加載渲染的速度。 原文地址在 我的筆記里，覺(jué)得還行就給個(gè) star 吧：） 關(guān)于 preload 和 prefetch 早有耳聞，知道它們可以優(yōu)化頁(yè)面加載速度，然具體情況卻了解不多。...

    SillyMonkey 評(píng)論0 收藏0

  • Web 性能優(yōu)化：Preload,Prefetch的使用及在 Chrome 中的優(yōu)先級(jí)

    摘要：例如，將獲得最高優(yōu)先級(jí)，而將獲得低優(yōu)先級(jí)或中優(yōu)先級(jí)。不帶屬性的的優(yōu)先級(jí)將會(huì)等同于異步請(qǐng)求。對(duì)使用屬性，不然將不會(huì)從中獲益。因此，在標(biāo)記中聲明以被掃描器掃描。 這是 Web 性能優(yōu)化的第 6 篇，上一篇在下面看點(diǎn)擊查看： Web 性能優(yōu)化：使用 Webpack 分離數(shù)據(jù)的正確方法 Web 性能優(yōu)化：圖片優(yōu)化讓網(wǎng)站大小減少 62% Web 性能優(yōu)化：緩存 React 事件來(lái)提高性能 We...

    LiangJ 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn)prefetch, preload, dns-prefetch，defer和async

    摘要：緊接著發(fā)現(xiàn)，于是又停了，瀏覽器下載并執(zhí)行完，繼續(xù)。，發(fā)現(xiàn)，遂將中文字展示了出來(lái)。的執(zhí)行時(shí)間是在所有元素解析完成之后，事件觸發(fā)之前。的執(zhí)行時(shí)間是在當(dāng)前腳本下載完成后，所以多個(gè)是執(zhí)行順序是不固定的。至此，完美的結(jié)構(gòu)出爐了。 現(xiàn)代瀏覽器性能優(yōu)化-JS篇 眾所周知，JS的加載和執(zhí)行會(huì)阻塞瀏覽器渲染，所以目前業(yè)界普遍推薦把script放到之前，以解決js執(zhí)行時(shí)找不到dom等問(wèn)題。但隨著現(xiàn)代瀏覽器...

    godiscoder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<