共有:defer和async、動態創建DOM方式(用得最多)、按需異步載入js
defer屬性:(頁面load后執行)
HTML 4.01 為 <script>
標簽定義了 defer
屬性。
用途:表明腳本在執行時不會影響頁面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢之后再執行。
在<script>
元素中設置 defer
屬性,等於告訴瀏覽器立即下載,但延遲執行。
<head> <script src="test1.js" defer="defer"></script> <script src="test2.js" defer="defer"></script> </head>
async屬性:(頁面load前執行)
HTML5 為 <script>
標簽定義了 async
屬性。與defer
屬性類似,都用於改變處理腳本的行為。同樣,只適用於外部腳本文件。
目的:不讓頁面等待腳本下載和執行,從而異步加載頁面其他內容。異步腳本一定會在頁面 load 事件前執行。不能保證腳本會按順序執行。
<head> <script src="test1.js" async></script> <script src="test2.js" async></script> </head> <body>
動態創建Dom:
//這些代碼應被放置在</body>標簽前(接近HTML文件底部) <script type="text/javascript"> function downloadJSAtOnload() { varelement = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load",downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload",downloadJSAtOnload); else window.onload =downloadJSAtOnload; </script>