js延迟加载就是当页面全部加载完毕,然后再加载js文件,这样做有助于提高页面加载的速度。
下面将总结js中延迟加载的几种方式。
1、defer属性
在script标签上,设置defer属性,可以达到异步加载js文件,延迟执行js脚本文件的目的。
1、defer属性只对外部文件有效,对本地js文件没有效果。
2、defer属性是在遇到scirpt标签时,浏览器开始异步下载,当遇到</html>标签时,表名页面加载完毕,开始执行js文件。
3、并且js文件是按顺序执行的。
2、async属性
在script标签上,设置async属性,可以达到异步加载js文件的目的。
1、async属性只对外部文件有效,对本地js文件没有效果。
2、async属性是遇到scirpt标签开始通知浏览器异步下载,下载完毕之后,就可以立即执行。
3、async设置的js文件不是按照顺序的。
3、动态创建DOM方式
动态创建script标签,当页面的全部内容加载完毕后,在执行创建挂载。
<script>
function loadJS() {
let element = document.createElement("script")
element.src = "download.js"
document.body.appendChild(element)
}
if(window.addEventListener) {
window.addEventListener("load", loadJS, false)
}else if(window.attachEvent) {
window.attachEvent("onload", loadJS)
}else {
window.onload = loadJS
}
</script>
4、使用setTimeout
在每一个脚本文件最外层设置一个定时器。
5、把js文件放在最后
当外部加载js文件是,应该将js脚本放在最后,当全部的文件都加载完成后,再开始加载执行js脚本。