script的加載方式與執行

script通常是阻塞式加載的，H5新增了async、defer和module特性，可用於異步加載/延遲執行：

• async 屬性是指當這個 script 可用時，就異步執行它
• defer 屬性是指當頁面被解析完畢後，才能執行
• 若是以上兩個屬性都沒有，則馬上下載並執行，同時阻止頁面的解析，直到執行完畢
• module 屬性是指關聯腳本所有下載後纔會執行，且不受defer影響

標準定義詳見：https://html.spec.whatwg.org/#the-script-element

關於async和defer

aysnc 的 script 不能保證在 jQuery(document).ready 的時候是可用的，而 defer 能夠。

這篇博文給出了以下測試結果：

jQuery(document).ready 的執行時序。
Chrome 下是：defer -> jQuery(document).ready -> async -> window.onload。
Firefox 下是：async -> defer -> jQuery(document).ready -> window.onload。
我又把 JavaScript 的下載速度變慢，發現結果仍然沒有變化。

因此使用async的時候須要謹慎，全局的屬性和方法最好提早定義。

動態加載javascript基本

還有一個經常使用的技巧是，在須要的時候動態加載腳本——好比日期插件、地區選擇插件，等等——以便加快頁面載入速度。該博文也提到了相關方法及一些坑。

不過這裏我關心的是執行時機。onload事件被認爲是能夠確保在SCRIPT執行完成後立刻被執行，但實際使用中發現，此時它仍有可能未完成初始化，若是當即執行callback可能會出問題，對於體積較大的插件（如echarts)，出錯的機率明顯變大。

因此，應當把onload當作loaded事件處理。而後使用setTimeout方法延遲執行callback，以保障它真的執行完畢了。不過期間閾值很差定，這也是個坑。

後來發現了beforescriptexecute和afterscriptexecute，<del>但貌似只有Firefox支持</del>當前無瀏覽器支持，並且若是這個script標籤是用appendChild()等方法動態添加上去的,則不會觸發該事件，暫時是無望了。

暫時沒找到更好的辦法。歡迎你們出主意:-)