自動目錄
一般我們引入一個外部的javascript會使用這樣的寫法：
<script src="/path/to/your.js"></scrpt>
* 預設用法
* 下載後會先執行，執行完此js後頁面才會繼續繪製下去。
* 如果這個js很大或是要執行不少時間，畫面會卡卡的
在HTML5中新增定義了三個屬性 async, defer
async屬性
<script async src="/path/to/your.js"></scrpt>
* 一定要搭配 src的屬性才有作用
* 下載後會先執行，但執行此js同時也繼續載入頁面及執行其他js。
* 目前的所有瀏覽器都支援(2016)
* 使用時機：此js和其他的js無連帶關係，即不需等待其他的js執行完，可獨立作業。
defer屬性
<script defer src="/path/to/your.js"></scrpt>
* 一定要搭配 src的屬性才有作用
* 要整個頁面都下載及分析完成後才會執行，非常類似於把js放在頁尾的情況。
* 目前的所有瀏覽器都支援(2016)
* 使用時機：此js一定要頁面全繪完再執行才行
async+defer屬性
<script async defer src="/path/to/your.js"></scrpt>
* 一定要搭配 src的屬性才有作用
* 要整個頁面都下載及分析完成後才會非同步執行這個js後面剩下的部分。
參考資料[2]有簡單明瞭的時序圖
測試
HTML
<!doctype html> <html> <head> <meta charset="utf-8" /> <script async src="01.js"></script> <script defer src="02.js"></script> </head> <body> Page START<br/> Page END </body>
JS 01.js
alert(1);
JS 02.js
alert(2);
測試結果
頁面畫完->1->2
拿掉async和defer結果：
1->2->頁面畫完
參考資料
[1] http://www.w3schools.com/tags/att_script_async.asp
[2] http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
END
