js延遲載入的方式有哪些
阿新 • • 發佈：2019-02-11
defer和async屬性、動態建立DOM方式（用得最多）、按需非同步載入js。注：（setTimeOut（js，time））
JS延遲載入，也就是等頁面載入完成之後再載入 JavaScript
檔案。
JS延遲載入有助於提高頁面載入速度。
1. defer 屬性
HTML 4.01 為 <script>標籤定義了 defer屬性。
用途：表明指令碼在執行時不會影響頁面的構造。也就是說，指令碼會被延遲到整個頁面都解析完畢之後再執行。
在<script> 元素中設定 defer 屬性，等於告訴瀏覽器立即下載，但延遲執行。
<!DOCTYPE html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
說明：雖然<script> 元素放在了<head>元素中，但包含的指令碼將延遲瀏覽器遇到</html>
HTML5規範要求指令碼按照它們出現的先後順序執行。在現實當中，延遲指令碼並不一定會按照順序執行。
defer屬性只適用於外部指令碼檔案。支援 HTML5 的實現會忽略嵌入指令碼設定的 defer屬性。
2. async 屬性
HTML5 為 <script>標籤定義了 async屬性。與defer屬性類似，都用於改變處理指令碼的行為。同樣，只適用於外部指令碼檔案。
目的：不讓頁面等待指令碼下載和執行，從而非同步載入頁面其他內容。
非同步指令碼一定會在頁面 load 事件前執行。
不能保證指令碼會按順序執行。
<!DOCTYPE html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的載入。
缺點：不能控制載入的順序
3.動態建立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> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
4.使用jQuery的getScript()方法
$.getScript("outer.js",function(){//回撥函式，成功獲取檔案後執行的函式
console.log("指令碼載入完成")
});- 1
- 2
- 3
5.使用setTimeout延遲方法
6.讓JS最後載入
把js外部引入的檔案放到頁面底部，來讓js最後引入，從而加快頁面載入速度