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樹已經構建完成了。