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

時間 2019-11-07

標籤 prefetch preload dns defer async 欄目系統網絡简体版

原文原文鏈接

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

衆所周知，JS的加載和執行會阻塞瀏覽器渲染，因此目前業界廣泛推薦把script放到</body>以前，以解決js執行時找不到dom等問題。但隨着現代瀏覽器的普及，瀏覽器爲咱們提供了更多強大的武器，合理利用，方可大幅提升頁面加載速度。

理解渲染過程（HTML Parser）

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

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/style.css">
    <script type="text/javascript" src="/header.js"></script>
</head>
<body>
  <p>Text</p>
  <script type="text/javascript" src="/main.js"></script>
</body>
</html>

瀏覽器自上而下讀取html文檔（此過程叫html parser），當發現style.css文件時，瀏覽器parser停下來去搞css，等style.css下載並解析完畢，瀏覽器繼續parser。緊接着發現header.js，因而html parser又停了，瀏覽器下載並執行完header.js，繼續parser。此時屏幕上還什麼都沒有。...parser，發現<p>，遂將p中文字展現了出來。緊接着又發現main.js，瀏覽器又停下parser，下載並執行完main.js才繼續parser，直到頁面渲染完畢。css

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

核心：減小JS下載時間

預先解析DNS

很是簡單，效果立竿見影，加快頁面加載時間，多用於預解析CDN的地址的DNS前端

<!--在head標籤中，越早越好-->
<link rel="dns-prefetch" href="//example.com">

Preload

瀏覽器會在遇到以下link標籤時，馬上開始下載main.js(不阻塞parser)，並放在內存中，但不會執行其中的JS語句。
只有當遇到script標籤加載的也是main.js的時候，瀏覽器纔會直接將預先加載的JS執行掉。java

<link rel="preload" href="/main.js" as="script">

Prefetch

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

若是prefetch還沒下載完以前，瀏覽器發現script標籤也引用了一樣的資源，瀏覽器會再次發起請求，這樣會嚴重影響性能的，加載了兩次，，因此不要在當前頁面立刻就要用的資源上用prefetch，要用preload。瀏覽器

<link href="main.js" rel="prefetch">

JS在何時執行的（defer和async）

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

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

defer的執行時間是在全部元素解析完成以後，DOMContentLoaded 事件觸發以前。服務器

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

完美的結構

前面兩節幫咱們弄懂了JS的下載和執行時機，那什麼樣的頁面纔是完美符合現代瀏覽器的那？其實關鍵在於的preload和prefetch！提早告知瀏覽器，咱們的網站立刻要用的是什麼，之後可能要用的是什麼，瀏覽器才能更快的渲染頁面。下面是一段實例代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Faster</title>
  <link rel="dns-prefetch" href="//cdn.com/">
  <link rel="preload" href="//js.cdn.com/currentPage-part1.js" as="script">
  <link rel="preload" href="//js.cdn.com/currentPage-part2.js" as="script">
  <link rel="preload" href="//js.cdn.com/currentPage-part3.js" as="script">

  <link rel="prefetch" href="//js.cdn.com/prefetch.js">
</head>
<body>

<script type="text/javascript" src="//js.cdn.com/currentPage-part1.js" defer></script>
<script type="text/javascript" src="//js.cdn.com/currentPage-part2.js" defer></script>
<script type="text/javascript" src="//js.cdn.com/currentPage-part3.js" defer></script>
</body>
</html>

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

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

將script標籤依然放在</body>以前，並增長defer標籤，確保老瀏覽器兼容，並在全部DOM元素解析完成以後執行其中的代碼。

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

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