preload、prefetch的認識

知識 11-12

現在的網路情況雖然很樂觀，但是

defer和async

當瀏覽器碰到 script 腳本的時候：

沒有 defer 或 async，瀏覽器會立即載入並執行指定的腳本，「立即」指的是在渲染該 script 標籤之下的文檔元素之前，也就是說不等待後續載入的文檔元素，讀到就載入並執行。

有 async，載入和渲染後續文檔元素的過程將和 script.js 的載入與執行並行進行（非同步）。

有 defer，載入後續文檔元素的過程將和 script.js 的載入並行進行（非同步），但是 script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成。

然後從實用角度來說呢，首先把所有腳本都丟到之前是最佳實踐，因為對於舊瀏覽器來說這是唯一的優化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到載入和解析。

接著，我們來看一張圖咯：

此圖告訴我們以下幾個要點：

defer 和 async 在網路讀取（下載）這塊兒是一樣的，都是非同步的（相較於 HTML 解析）

它倆的差別在於腳本下載完之後何時執行，顯然 defer 是最接近我們對於應用腳本載入和執行的要求的

關於 defer，此圖未盡之處在於它是按照載入順序執行腳本的，這一點要善加利用

async 則是一個亂序執行的主，反正對它來說腳本的載入和執行是緊緊挨著的，所以不管你聲明的順序如何，只要它載入完了就會立刻執行

仔細想想，async 對於應用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執行），不過它對於那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，

preload和refetch

通常在頁面中，我們需要載入一些腳本和樣式，而使用 preload 可以對當前頁面所需的腳本、樣式等資源進行預載入，而無需等到解析到 script 和 link 標籤時才進行載入。這一機制使得資源可以更早的得到載入並可用，且更不易阻塞頁面的初步渲染，進而提升性能。

使用方式

將 link 標籤的 rel 屬性的值設為 preload，as 屬性的值為資源類型（如腳本為 script，樣式表為 style）

與一樣，都是對資源進行預載入，但是 prefetch 載入的資源一般不是用於當前頁面的，即未來很可能用到的這樣一些資源，簡單點說就是其他頁面會用到的資源。當然，prefetch 不會像 preload 一樣，在頁面渲染的時候載入資源，而是利用瀏覽器空閑時間來下載。當進入下一頁面，就可直接從 disk cache 裡面取，既不影響當前頁面的渲染，又提高了其他頁面載入渲染的速度。

使用方式

同很相似，無需指定 as 屬性：

總結:對當前頁面需要的資源，使用 preload 進行預載入，對其它頁面需要的資源進行 prefetch 預載入。

Subresource和Prerender

可以用來指定資源是最高優先順序的。比如，在Chrome和Opera中我們可以加上下面的代碼：

Chromium的文檔這麼解釋：

和 "Link rel=prefetch"的語義不同，"Link rel=subresource"是一種新的連接關係。rel=prefetch指定了下載後續頁面用到資源的低優先順序，而rel=subresource則是指定當前頁面資源的提前載入。

所以，如果資源是在當前頁面需要，或者馬上就會用到，則推薦用subresource，否則還是用prefetch。

是一個重量級的選項，它可以讓瀏覽器提前載入指定頁面的所有資源。

Steve Souders的文章詳細解釋了這個技術：

prerender就像是在後台打開了一個隱藏的tab，會下載所有的資源、創建DOM、渲染頁面、執行JS等等。如果用戶進入指定的鏈接，隱藏的這個頁面就會進入馬上進入用戶的視線。Google Search多年前就利用了這個特性實現了Instant Pages功能。微軟最近也宣布會讓Bing在IE11上用類似prerender的技術。

但是要注意，一定要在十分確定用戶回點某個鏈接時才用這個特性，否則客戶端就會無端的下載很多資源和渲染這個頁面。

正如任何提前的動作一樣，預判總是有一定風險出錯。如果提前的動作是昂貴的（比如高CPU、耗電、佔用帶寬），就要謹慎使用了。雖然不容易預判用戶會點進哪個頁面，但還是存在一些典型的場景：

如果用戶搜索到了一個明顯正確的結果時，那麼這個頁面就很有可能被點入

如果用戶在登錄頁面，那麼登錄成功後的頁面就很可能接下來會被載入了

如果用戶在閱讀一個多頁面的文章或者有頁碼的內容時，下一頁就很可能會馬上被點擊了

利用Page Visibility API可以用來防止頁面在還沒真正展示給用戶時就觸發了JS的執行。

Prerender Subresource

END

作者：caoweiju

https://segmentfault.com/a/1190000016955899

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！