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树已经构建完成了。

转载于:https://www.cnblogs.com/rainbow8590/p/7100616.html