異步加載腳本

異步加載

defer屬性和async屬性提供了異步加載腳本的方法。使用以下

<script defer src="test.js"></script>
<script async src="test.js"></script>

使用defer和async屬性的外鏈腳本，告訴瀏覽器它們不會包含document.write方法，因此瀏覽器在遇到它們的時候，不用停下來等腳本下載完畢並執行以後再繼續解析和渲染文檔。這二者有一些區別

1. defer屬性的腳本會按照它們在文檔中的順序執行，async屬性的腳本不必定按順序執行，哪一個腳本先下載完就先執行
2. defer在DOMContentLoaded事件發生前執行，async腳本可能在DOMContentLoaded事件前執行，也有可能在以後執行，可是確定在loaded事件前執行。

注意：因爲不一樣的瀏覽器實現，defer事件也不必定會在DOMContentLoaded事件前執行

客戶端js時間線

1. 瀏覽器建立document對象，開始解析文檔，document.readyState=loading
2. 碰到同步腳本，就中止解析，下載腳本並執行，碰到異步腳本就異步加載。async腳本加載完就執行，defer腳本加載完等待。
3. 當文檔完成解析，document.readyState=interactive
4. defer腳本按順序執行
5. 在document對象上觸發DOMContentLoaded事件，可能還存在異步腳本未執行完。
6. 當文檔完成解析、腳本加載並執行完畢，可能還有些資源未載入，好比圖片之類的。等全部資源到位後，document.readyState=complete，並在window對象上觸發load事件。