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最后加载