-_-#【JS】defer / async

引用JavaScript檔案時的兩個屬性defer和async

<script src="js1.js" defer></script>

<script src="js2.js" async></script>

defer 延遲腳本

立即下載下傳，延遲執行

這個屬性的用途是表明腳本在執行時不會影響頁 面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢後再運作

HTML5 規範要求腳本按照它們出現的先後順序執行,是以第一個延遲腳本會先于第二個延遲腳本執行,而這兩個腳本會先于 DOMContentLoaded 事件執行。

在現實當中,延遲腳本并不一定會按照順序執行,也不一定會在 DOMContentLoaded 事件觸發 前執行,是以最好隻包含一個延遲腳本

IE4、Firefox 3.5、Safari 5 和 Chrome 是最早支援 defer 屬性的浏覽器。其他浏覽器會忽略這個屬 性,像平常一樣處理腳本。為此,把延遲腳本放在頁面底部仍然是最佳選擇

async 異步腳本

立即下載下傳，立即執行

指定 async 屬性的目的是不讓頁面等待兩個腳本下載下傳和執行,進而異步加載頁面其他内容

标記為 async 的腳本并不保證按照指定它們的先後順序執行

異步腳本一定會在頁面的 load 事件前執行,但可能會在 DOMContentLoaded 事件觸發之前或之 後執行。

支援異步腳本的浏覽器有 Firefox 3.6、Safari 5 和 Chrome