摘要：當然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的里面的域名，并且你的網(wǎng)站域名還不能是，如果是，則需要設置請求頭或加入一段強制開啟域名解析的標簽。

廢話：異步加載和預加載一直都是前端優(yōu)化必備技能之一，今天我們就來深度解析一下常用的幾個關鍵點。

廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好：

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

從這張圖里面，我們看到了什么，大概總結(jié)為以下四點：

默認情況HTML解析，然后加載JS，此時HTML解析中斷，然后執(zhí)行JS，最后JS執(zhí)行完成恢復HTML解析。

defer情況下HTML和JS并駕齊驅(qū)，最后才執(zhí)行JS

async情況則HTML和JS并駕齊驅(qū)，JS的執(zhí)行可能在HTML解析之前就已經(jīng)完成了

最后module情況和defer的情況類似，只不過會在提取的過程中加載多個JS文件罷了

好了，區(qū)分的大概基本已經(jīng)了解了，那怎么記住呢？默認的情況我們已經(jīng)很熟了，就無需多記了。

defer翻譯過來是延緩的意思，也就是拖拖拉拉了，所以比較懶，也就是說什么都不想做，也就是哪怕你把飯端在我面前，我也懶得動嘴的那種，這么一想，我們不就記住了，哪怕你客戶端把JS文件下載好了，我也懶得執(zhí)行，最后實在是大家都干完事了，我才不情愿的去執(zhí)行JS文件。

async翻譯過來就是異步的意思，異步異步，不就是一步一步嘛，什么都想一步到位，也就是說，只要下載完我就立馬執(zhí)行，至于其他的想都不想。

module翻譯過來就是模塊的意思，es6用過的人基本都了解這個關鍵字，加載也和defer差不多，只不過可以加載多個JS文件而已。

我們再來看看這幾個加載的DOM事件時機：

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

從這張圖可以看出大概這幾點：

async 會在加載完JS后立即執(zhí)行，最遲也會在load事件前執(zhí)行完。

defer會在HTML解析完成后執(zhí)行，最遲也會在DOMContentLoaded事件前執(zhí)行完。

從上面我們可以看出，如果你的腳本依賴于DOM構(gòu)建完成是否完成，則可以使用defer；如果無需DOM的構(gòu)建，那就可以放心的使用async了。

defer屬性僅適用于外部腳本，也就是僅當存在src屬性時才會生效；如果一個script標簽上面即存在defer屬性，也存在async屬性，那么瀏覽器會如何解析這種情況呢？我們通過一段代碼驗證結(jié)果,詳情點擊這里。

也就是說defer的優(yōu)先級沒有async高，我們看一下規(guī)范是怎么處理這種情況的。

The?defer?attribute may be specified even if the?async?attribute is specified, to cause legacy Web browsers that only support?defer?(and not?async) to fall back to the?defer?behavior instead of the blocking behavior that is the default.

規(guī)范只是說明了在不支持async的情況下瀏覽器將會回退支持defer，但并沒有明確指明兩種都支持的這種情況，也就是說這一種情況瀏覽器自行處理，經(jīng)過測試，各個瀏覽器表現(xiàn)行為：

Chrome瀏覽器表現(xiàn)為解析為async特性

Safari瀏覽器表現(xiàn)為async特性

Opera瀏覽器表現(xiàn)為async特性

Firefox瀏覽器表現(xiàn)為async特性

IE暫時沒有安裝，看來各大瀏覽器表現(xiàn)一致，總之a(chǎn)sync的優(yōu)先級是最高的。

下面來看看defer的兼容性，移動端一片大綠，可以放心使用，IE10以上可以放心使用，IE6-9有一點小問題就是不會按照script標簽的執(zhí)行順序進行執(zhí)行，對于不依賴前后腳本庫的可以不用擔心，但是如果依賴庫的就不行了，比如你的項目依賴jQuery，后面緊接著使用jQuery的方法可能就會出現(xiàn)問題。

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

和defer一樣，也僅僅適用于外部腳本，也就是僅當存在src屬性時才會生效。

async的兼容性在移動端也是一片大綠，IE僅支持IE10+。

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

在現(xiàn)代瀏覽器中，我們可以聲明acript標簽type=’module’屬性從而擁抱es6的模塊導入導出語法，就像這樣：

看起來是不是令人很激動，似乎對于開發(fā)者十分友好，但是這里也有幾個與傳統(tǒng)腳本不一樣的地方：

module默認使用了”use strict”模式，這也意味著不能使用諸如arguments.callee這一類的語法。

模塊只會加載一次，無論前后你寫了多少次。

不支持注釋。

module有自己的詞法作用域，比如定義一個 var a = 1，并不會創(chuàng)建一個全局變量，因此你并不能通過window.a 訪問到它的值。

模塊的導入方式目前僅支持以下幾種模式：

支持
import {math} from "./math.mjs";
import {math} from "../math.mjs";
import {math} from "/modules/math.mjs";
import {math} from "https://simple.example/modules/math.mjs";
//不支持
import {math} from "jquery";

當然，瀏覽器廠商也在考慮支持 import {math} from ‘jquery’ 這種格式，不過，還是需要一段很長的路要走。

module的默認情況就是defer的，因此不必再module上面又添加一個defer熟悉，并且本身就不支持這種寫法，但是支持async屬性，其加載渲染方式和async差不多，這里不再贅述。

在移動端的兼容性還算可以，但是IE貌似都敗下陣來，只要edge16+以上還算支持，對于不支持module的瀏覽器可以使用nomodule屬性作為版本回退的方案解決。

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

最后來說一下module的使用建議，大型項目（100模塊以上）不建議直接使用模塊語法，應該使用打包工具諸如Webpack，Rollup,、或 Parcel，因為靜態(tài)導入或?qū)С稣Z法是靜態(tài)可分析的，通過捆綁工具可以去掉多余的模塊，我們考慮下面這一種場景：

import { Modal } from "./util.js";
Modal({
  title: "hello"
})

如果我們通過打包工具打包這一份代碼，最終生成的JS文件將會只包含Modal這一個函數(shù)，倘若我們沒有使用打包工具，瀏覽器將會下載整個util這一個JS文件，并通過進一步分析了解了使用了Modal這一個函數(shù)，這對于沒有用到util里面的全部函數(shù)的方式，則是一種多余的帶寬浪費。

在我們的瀏覽器加載資源的時候，對于每一個資源都有其自身的默認優(yōu)先級，倘若我們能修改每一個資源的默認優(yōu)先級，那我們幾乎可以按照我們的預期加載想要加載的資源。

以谷歌瀏覽器為例，我們打開控制臺，并切換到Network選項，點擊刷新頁面，在網(wǎng)絡下面的title一行點擊鼠標右鍵，勾選Priority即可看到加載資源的優(yōu)先級，我們可以看到樣式的級別比腳本的優(yōu)先級高，畢竟頁面的一加載進來肯定是樣式首先需要渲染的，不然整個頁面便會四分五裂，用戶體驗不好。

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

preload翻譯過來就是預加載，一旦啟用后便會告知瀏覽器應該盡快的加載某個資源，如果提取的資源3s內(nèi)未在當前使用，在谷歌開發(fā)工具將會觸發(fā)警告消息

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

大概的語法如下：

除了以上指定的資源外，還可以加載audio、font、video以及document等，詳情點擊這里了解。

如需加載跨域的資源列表，則需要正確設置CORS，接著便可以在元素中設置好crossorigin屬性即可：

這里有一個特例便是無論是否跨域，字體的獲取都需要設置crossorigin屬性，這是由于歷史原因造成，有興趣了解可移步這里了解，另外我們還可以使用media響應式的加載圖片，比如：

另一個重要的地方便是如果預加載一個腳本，它并不是執(zhí)行：

//只拉取下載不執(zhí)行
var preloadLink = document.createElement("link");
preloadLink.href = "foo.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

//如果需要執(zhí)行
var preloadedScript = document.createElement("script");
preloadedScript.src = "foo.js";
document.body.appendChild(preloadedScript);

兼容似乎IE全體陣亡，edge也得17+才能勉強支持，火狐需要手動啟動支持，移動端支持程度還是挺好的。

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

簡而言之預提取就是在我們頁面加載完成后，在帶寬可用的情況下，加載用戶下一步期待的頁面資源，比如企業(yè)認證，一般都是分好幾個頁面進行認證的，在用戶從第一個頁面進行認證的時候，在頁面加載完成，用戶正在填寫表單數(shù)據(jù)之時，加載第二個頁面的部分資源，從而使用戶更快打開下一個頁面，從而增加用戶體驗，示例：

當瀏覽器解析到link標簽時，讀取到rel的值為prefetch，便會將這一個資源添加的隊列中，當瀏覽器空閑時便會預提取資源，但是在demo.html頁面中只是加載HTML，不會加載demo頁面里面的任何其他資源，除非你在demo頁面也明確使用了預提取。

各大瀏覽器支持都還挺好，IE11+以上，但是Safari貌似到現(xiàn)在還沒支持。

我們都知道，當我們在瀏覽器的地址欄輸入域名的時候，首先要進行的就是域名解析，因為我們需要加載域名對應的資源，這個過程很快，但是如果在移動端，那可是一個分秒必爭的地方，當一個頁面需要訪問許多外部域名的資源的時候，如果我們能在用戶瀏覽頁面的時候，在瀏覽器空閑的時間，把可能需要訪問的域名都提前做好了域名解析，那是不是大大增加了用戶打開頁面的響應時間，增加用戶體驗，為了解決這個問題，w3c便提出來一個標準，學名叫dns-prefetch。

和預加載(preload、prefetch、dns-prefetch、preconnect 、prerender)")

使用方法上面中已經(jīng)支持了，指定rel=”dns-prefetch”，在href中指定頁面需要解析的域名即可，你可能已經(jīng)注意到了上面的圖中域名使用了雙斜杠，這個雙斜杠表示URL以主機名開頭，和你使用完整URL（比如http://g.alicdn.com/）是等效的。在RFC1808中被指定。

當然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的href里面的域名，并且你的網(wǎng)站域名還不能是HTTPS，如果是HTTPS，則需要設置請求頭或加入一段強制開啟域名解析的meta標簽。

//HTTP
 //多余

//HTTPS
//強制開啟