程序员社区

js 延迟加载的方式有哪些

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脚本。

赞(0) 打赏
未经允许不得转载:IDEA激活码 » js 延迟加载的方式有哪些

一个分享Java & Python知识的社区