js延迟加载的方式有哪些

首先了解一下浏览器的渲染机制：从上往下进行解析html标签，当遇到script标签时会暂停解析，然后加载js文件，然后执行js文件，再继续解析html标签

所以如果我们把js文件放在head标签中，会阻塞dom的解析，并且如果js文件中需要操作dom时，会导致拿不到dom元素，因为这时候dom元素还没有进行解析，通常情况下将js文件的引入放在body的最后面，也可以使用以下方式来延迟加载js

js延迟加载就是当页面（dom树解析）全部加载完毕，然后再加载js文件，这样做有助于提高页面加载的速度。

了解defer和async

1、defer属性

在script标签上，设置defer属性，可以达到异步加载js文件，延迟执行js脚本文件的目的。

1、defer属性只对外部文件有效，对本地js文件没有效果。
2、defer属性是在遇到scirpt标签时，浏览器开始异步下载，当遇到标签时，表名页面加载完毕，开始执行js文件。
3、并且js文件是按顺序执行的。
如果多个外部js文件都用了defer属性，这几个文件是按照顺序执行的

2、async属性

在script标签上，设置async属性，可以达到异步加载js文件的目的。

1、async属性只对外部文件有效，对本地js文件没有效果。
2、async属性是遇到scirpt标签开始通知浏览器异步下载，下载完毕之后，就可以立即执行。
3、async设置的js文件不是按照顺序的。

在使用了async和defer的script标签中，不管这些js文件放在哪里，head中或body的最后面，都是异步的，都是要等页面解析完后执行的

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