引用js檔案格式如下：

<script type="text/javascript" defer="defer" async="true/false" src="js文件地址"></script>

• defer="defer":該屬性用來通知瀏覽器，這段指令碼程式碼將不會產生任何文件內容。例如JavaScript程式碼中的document.write()方法將不會騎作用，瀏覽器遇到這樣的程式碼將會忽略，並繼續執行後面的程式碼。屬性只能是defer，與屬性名相同。在HTML語法格式下，也允許不定義屬性值，僅僅使用屬性名。
• async="true/false":該屬性為html5中新增的屬性，它的作用是能夠非同步地下載和執行指令碼，不因為載入指令碼而阻塞頁面的載入。一旦下載完畢就會立刻執行。

async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的載入，但在async的情況下，js文件一旦下載完畢就會立刻執行，所以很有可能不是按照原本的順序來執行，如果js有依賴性，就要注意了。

如下圖：

defer和async的比較

相同點：

• 載入檔案時不阻塞頁面渲染；
• 對於inline的script無效；
• 使用這兩個屬性的指令碼中不能呼叫document.write方法；
• 有指令碼的onload的事件回撥；
• 允許不定義屬性值，僅僅使用屬性名；

不同點：

• html的版本html4.0中定義了defer；html5.0中定義了async；這將造成由於瀏覽器版本的不同而對其支援的程度不同；
• 執行時刻：每一個async屬性的指令碼都在它下載結束之後立刻執行，同時會在window的load事件之前執行。所以就有可能出現指令碼執行順序被打亂的情況；每一個defer屬性的指令碼都是在頁面解析完畢之後，按照原本的順序執行，同時會在document的DOMContentLoaded之前執行。

這兩個屬性會有三種可能的組合：

• 如果async為true，那麼指令碼在下載完成後非同步執行。
• 如果async為false，defer為true，那麼指令碼會在頁面解析完畢之後執行。
• 如果async和defer都為false，那麼指令碼會在頁面解析中，停止頁面解析，立刻下載並且執行。