close
轉自 http://n.sfs.tw/content/index/10323
補充：include CSS也可以使用這兩個tag
--
一般我們引入一個外部的javascript會使用這樣的寫法：
|
1
|
<script src="/path/to/your.js"></scrpt> |
* 預設用法
* 下載後會先執行，執行完此js後頁面才會繼續繪製下去。
* 如果這個js很大或是要執行不少時間，畫面會卡卡的
在HTML5中新增定義了三個屬性 async, defer
async屬性
|
1
|
<script async src="/path/to/your.js"></scrpt> |
* 一定要搭配 src的屬性才有作用
* 下載後會先執行，但執行此js同時也繼續載入頁面及執行其他js。
* 目前的所有瀏覽器都支援(2016)
* 使用時機：此js和其他的js無連帶關係，即不需等待其他的js執行完，可獨立作業。
defer屬性
|
1
|
<script defer src="/path/to/your.js"></scrpt> |
* 一定要搭配 src的屬性才有作用
* 要整個頁面都下載及分析完成後才會執行，非常類似於把js放在頁尾的情況。
* 目前的所有瀏覽器都支援(2016)
* 使用時機：此js一定要頁面全繪完再執行才行
async+defer屬性
|
1
|
<script async defer src="/path/to/your.js"></scrpt> |
* 一定要搭配 src的屬性才有作用
* 要整個頁面都下載及分析完成後才會非同步執行這個js後面剩下的部分。
參考資料[2]有簡單明瞭的時序圖
測試
HTML
|
1
2
3
4
5
6
7
8
9
10
11
|
<!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
|
1
|
alert(1); |
JS 02.js
|
1
|
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
--
全站熱搜
留言列表
AI 
