script中defer和async的區別

定義

defer：此布爾屬性被設置爲向瀏覽器指示腳本在文檔被解析後執行。
  async：設置此布爾屬性，以指示瀏覽器若是可能的話，應異步執行腳本。複製代碼

1. 對於defer，咱們能夠認爲是將外鏈的js放在了頁面底部。js的加載不會阻塞頁面的渲染和資源的加載。不過defer會按照本來的js的順序執行，因此若是先後有依賴關係的js能夠放心使用。

2. 對於async，這個是html5中新增的屬性，它的做用是可以異步的加載和執行腳本，不由於加載腳本而阻塞頁面的加載。一旦加載到就會馬上執行在有async的狀況下，js一旦下載好了就會執行，因此頗有可能不是按照本來的順序來執行的。若是js先後有依賴性，用async，就頗有可能出錯。

區別

相同點：

• 加載文件時不阻塞頁面渲染
• 對於inline的script（內聯腳本）無效
• 使用這兩個屬性的腳本中不能調用document.write方法
• 有腳本的onload的事件回調

不一樣點：

• html的版本html4.0中定義了defer；html5.0中定義了async
• 瀏覽器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
async attribute	(Supported)	3.6 (1.9.2)	10	—	(Supported)
defer attribute	(Supported)	3.5 (1.9.1)	4	—	(Supported)

• 執行時刻
  每個async屬性的腳本都在它下載結束以後馬上執行，同時會在window的load事件以前執行。因此就有可能出現腳本執行順序被打亂的狀況；每個defer屬性的腳本都是在頁面解析完畢以後，按照本來的順序執行，同時會在document的DOMContentLoaded以前執行。

結語

簡單的來講，使用這兩個屬性會有三種可能的狀況

1. 若是async爲true，那麼腳本在下載完成後異步執行。
2. 若是async爲false，defer爲true，那麼腳本會在頁面解析完畢以後執行。
3. 若是async和defer都爲false，那麼腳本會在頁面解析中，中止頁面解析，馬上下載而且執行。

最後給一點我的的建議，不管使用defer仍是async屬性，都須要首先將頁面中的js文件進行整理，哪些文件之間有依賴性，哪些文件能夠延遲加載等等，作好js代碼的合併和拆分，而後再根據頁面須要使用這兩個屬性。