帶你玩轉prefetch, preload, dns-prefetch，defer和async

lewif 發布于2019-08-01 17:47 / 2491人閱讀

摘要：緊接著發現，于是又停了，瀏覽器下載并執行完，繼續。，發現，遂將中文字展示了出來。的執行時間是在所有元素解析完成之后，事件觸發之前。的執行時間是在當前腳本下載完成后，所以多個是執行順序是不固定的。至此，完美的結構出爐了。

現代瀏覽器性能優化-JS篇

眾所周知，JS的加載和執行會阻塞瀏覽器渲染，所以目前業界普遍推薦把script放到之前，以解決js執行時找不到dom等問題。但隨著現代瀏覽器的普及，瀏覽器為我們提供了更多強大的武器，合理利用，方可大幅提高頁面加載速度。

理解渲染過程（HTML Parser）

首先我們從瀏覽器的角度解釋一下從輸入URL到頁面展示經歷了些什么，以如下html文檔舉例

Text

瀏覽器自上而下讀取html文檔（此過程叫html parser），當發現style.css文件時，瀏覽器parser停下來去搞css，等style.css下載并解析完畢，瀏覽器繼續parser。緊接著發現header.js，于是html parser又停了，瀏覽器下載并執行完header.js，繼續parser。此時屏幕上還什么都沒有。...parser，發現

，遂將p中文字展示了出來。緊接著又發現main.js，瀏覽器又停下parser，下載并執行完main.js才繼續parser，直到頁面渲染完畢。

我們假設header.js中只有一行代碼console.log("header")，但服務器響應很慢，要10秒才能把它返回給瀏覽器，瀏覽器執行這段代碼需要1ms，那在這 10s+1ms 內，頁面將一直空白。瀏覽器執行JS的時間取決于代碼質量和硬件，并不是前端工程師隨便可以優化的，所以優化的重點在JS的下載時間。

核心：減少JS下載時間 預先解析DNS

非常簡單，效果立竿見影，加快頁面加載時間，多用于預解析CDN的地址的DNS

Preload

瀏覽器會在遇到如下link標簽時，立刻開始下載main.js(不阻塞parser)，并放在內存中，但不會執行其中的JS語句。
只有當遇到script標簽加載的也是main.js的時候，瀏覽器才會直接將預先加載的JS執行掉。

Prefetch

瀏覽器會在空閑的時候，下載main.js, 并緩存到disk。當有頁面使用的時候，直接從disk緩存中讀取。其實就是把決定是否和什么時間加載這個資源的決定權交給瀏覽器。

如果prefetch還沒下載完之前，瀏覽器發現script標簽也引用了同樣的資源，瀏覽器會再次發起請求，這樣會嚴重影響性能的，加載了兩次，，所以不要在當前頁面馬上就要用的資源上用prefetch，要用preload。

JS在什么時候執行的（defer和async）

上面我們的例子中，script標簽都是在沒有多余屬性的情況下執行的，只要下載過程結束，瀏覽器就會將JS執行掉。
defer和async是script標簽的兩個屬性，用于在不阻塞頁面文檔解析的前提下，控制腳本的下載和執行。

defer，async與下載時機也有關，具體看這張圖。

defer的執行時間是在所有元素解析完成之后，DOMContentLoaded 事件觸發之前。

async的執行時間是在當前JS腳本下載完成后，所以多個async script是執行順序是不固定的。async只能用于加載一些獨立無依賴的代碼，比如Google Analysis之類。

完美的結構

前面兩節幫我們弄懂了JS的下載和執行時機，那什么樣的頁面才是完美符合現代瀏覽器的那？其實關鍵在于的preload和prefetch！提前告知瀏覽器，我們的網站馬上要用的是什么，以后可能要用的是什么，瀏覽器才能更快的渲染頁面。下面是一段實例代碼




  
  Faster

首先，Parser在遇到head中preload時開始下載JS，讀到script標簽的時候，如果已經下載完了，直接按順序執行之。如果沒下載完，則會等到下載完再執行。這樣就可以在剛進入頁面時開始非阻塞的下載JS代碼了。

其次，頁面會在空閑時，加載prefetch的JS，如果之后頁面發生跳轉，跳轉的目標頁面引入了prefetch.js，瀏覽器會直接從disk緩存中讀取執行。

將script標簽依然放在之前，并增加defer標簽，確保老瀏覽器兼容，并在所有DOM元素解析完成之后執行其中的代碼。

至此，完美的HTML結構出爐了。

CSS的下載和解析一樣會阻塞渲染，造成白屏，CSS中的字體文件更是影響首屏渲染關鍵因素之一，下一篇幅我會結合preload和prefetch，帶你一起優化CSS，告訴你什么是最適合現代瀏覽器的CSS加載策略，期待的話，點個贊吧！

GPU云服務器云服務器教你玩轉html5 preload Prefetching prefetch

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51367.html

帶你玩轉prefetch, preload, dns-prefetch，defer和async

摘要：緊接著發現，于是又停了，瀏覽器下載并執行完，繼續。，發現，遂將中文字展示了出來。的執行時間是在所有元素解析完成之后，事件觸發之前。的執行時間是在當前腳本下載完成后，所以多個是執行順序是不固定的。至此，完美的結構出爐了。現代瀏覽器性能優化-JS篇眾所周知，JS的加載和執行會阻塞瀏覽器渲染，所以目前業界普遍推薦把script放到之前，以解決js執行時找不到dom等問題。但隨著現代瀏覽器...

godiscoder 2019-08-21 17:05 評論0 收藏0
深度解析之異步加載和預加載

摘要：當然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的里面的域名，并且你的網站域名還不能是，如果是，則需要設置請求頭或加入一段強制開啟域名解析的標簽。廢話：異步加載和預加載一直都是前端優化必備技能之一，今天我們就來深度解析一下常用的幾個關鍵點。異步加載廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好： showImg(http...

qpal 2019-08-02 16:10 評論0 收藏0
深度解析之異步加載和預加載

摘要：當然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的里面的域名，并且你的網站域名還不能是，如果是，則需要設置請求頭或加入一段強制開啟域名解析的標簽。廢話：異步加載和預加載一直都是前端優化必備技能之一，今天我們就來深度解析一下常用的幾個關鍵點。異步加載廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好： showImg(http...

HackerShell 2019-08-26 13:41 評論0 收藏0
重學 html の link標簽

摘要：元素規定了外部資源與當前文檔的關系。常用于鏈接樣式表，創建網站圖標，預加載資源等。那么我們就可以在標簽設置字體的。注意當界面加載時，兩個樣式表都會下載到客戶端，只是會根據場景不同使用不同的樣式。標簽的和屬性的區別和目的引用一步前端 link元素規定了外部資源與當前文檔的關系。常用于鏈接樣式表，創建網站圖標，預加載資源等。鏈接樣式表? 創建站點圖標預加載用于前端界面性能優化...

ruicbAndroid 2019-08-02 16:15 評論0 收藏0