2019獨角獸企業重金招聘Python工程師標準>>>

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()等方法動態添加上去的,則不會觸發該事件，暫時是無望了。

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

轉載于:https://my.oschina.net/u/2324376/blog/692957

總結

以上是生活随笔為你收集整理的script的加载方式与执行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。