JS延迟加载

JS延迟加载的几种方法：

利用定时器

    利用定时器，延迟一定的时间后再引入js文件,给html的加载和渲染留出时间    setTimeout(function(){       document.getElementById(‘my').src='demo.js';    } “,3000);//延时3秒后执行 

defer 属性

    加上 defer 等于在页面完全载入后再执行    <scriptsrc="demo.js" defer></script>

async 属性

    js文档一旦下载完毕就会立刻执行，所以可能是不按照页面引入的顺序执行。    <scriptsrc="file.js" async></script>  

动态创建DOM方式

    监听load事件，当load事件触发的时候就动态加载js文件   <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>  

使用jQuery的getScript()方法

    通过回调函数来延迟加载js文件，回调函数时获取到demo.js后执行的代码    $.getScript("demo.js",function(){      console.log("脚本加载完成")      });  

在html底部加载js文件

    html是从上到下执行的，所以在</body>的前面引入js文件，js文件获取到执行的时候，DOM树已经构建完成了。