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

defer: 頁面渲染的時候遇到script文件會馬上下載，下載過程是異步的， script.js 的執行會在全部元素解析完成以後，DOMContentLoaded 事件觸發以前進行

async: 頁面渲染的時候遇到script文件會馬上下載，下載過程是異步的，下載完成後會自動執行，他執行的時候會阻塞dom解析，可是他執行時間不必定，可能在DTL事件以前，也可能以後，但必定在load事件以前，因此，async不能保證js文件的執行順序

dns-prefetch:  

<link rel="dns-prefetch" href="//example.com">
複製代碼

提早進行域名解析，對於taobao這種網站，它的網頁中引用了大量不少其餘域名的資源，適合這個屬性，若是網站的全部的資源基本都在本域名下，那麼這個基本沒有什麼做用。由於Chrome在訪問你的網站就幫你緩存了。

Preload:

<link rel="preload" href="/main.js" as="script">複製代碼

瀏覽器會在遇到如上link標籤時，馬上開始下載main.js(異步加載)，並放在內存中，但不會執行。只有當遇到script標籤加載的也是main.js的時候，瀏覽器纔會將預先加載的JS執行掉。若是這個時候JS仍然沒有下載完，瀏覽器不會從新發請求，而是等待此文件的加載。不只是JS文件，字體和圖片圖片等資源也能夠用這個屬性，不過記得用as屬性標明資源類型，不然這個設置會失效

Prefetch:

<link href="main.js" rel="prefetch">複製代碼

瀏覽器會在空閒的時候，下載main.js，當有頁面使用的時候，直接從緩存中讀取。實際上是把決定是否和什麼時間加載這個資源的決定權交給瀏覽器。若是在prefetch還沒下載完的時候，瀏覽器發現script標籤也引用了一樣的資源，瀏覽器會再次發起請求，這樣會形成加載了兩次，因此不要在當前頁面立刻就要用的資源上用prefetch，要用preload。

Preload預加載技術

github.com/lanjingling…