JS延遲加載,也就是等頁面加載完成之后再加載 JavaScript 文件。
JS延遲加載有助於提高頁面加載速度。
一般有以下幾種方式:
1)defer 屬性
1
|
<
script
src="test1.js" defer="defer"></
script
>
|
2)async 屬性
1
|
<
script
src="test1.js" async></
script
>
|
3)動態創建DOM方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//這些代碼應被放置在</
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
>
|
4)使用jQuery的getScript方法
1
2
3
|
$.getScript("outer.js",function(){//回調函數,成功獲取文件后執行的函數
console.log("腳本加載完成")
});
|
5)使用setTimeout延遲方法
6)讓JS最后加載