javascript延遲加載

爲何要延時加載呢？由於這樣在必定程度上能夠提升頁面加載速度。提高用戶使用溫馨度。

接下來就給你們介紹一下幾種延遲加載javascript方法：

• 將js文件放在body底部（經常使用）

• 可是第一種方法有時候會收到google延時加載js的警告，處理這種問題

  在body底部接入以下代碼

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = 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>

• setTimeout延時加載（經常使用）

• defer和async。

  - defer="defer":該屬性用來通知瀏覽器，這段腳本代碼將不會產生任何文檔內容。例如 JavaScript代碼中的document.write()方法將不會起做用，瀏覽器遇到這樣的代碼將會忽略，並繼續執行後面的代碼。屬性只能是 defer，與屬性名相同。在HTML語法格式下，也容許不定義屬性值，僅僅使用屬性名。
  - async="true/false":該屬性爲html5中新增的屬性，它的做用是可以異步地下載和執行腳本，不由於加載腳本而阻塞頁面的加載。一旦下載完畢就會馬上執行。
  defer和async的比較

  • 相同點：

    加載文件時不阻塞頁面渲染；
    對於inline的script無效；
    使用這兩個屬性的腳本中不能調用document.write方法；
    有腳本的onload的事件回調；
    容許不定義屬性值，僅僅使用屬性名；

  • 不一樣點：

    html的版本html4.0中定義了defer；html5.0中定義了async；這將形成因爲瀏覽器版本的不一樣而對其支持的程度不一樣；
     執行時刻：每個async屬性的腳本都在它下載結束以後馬上執行，同時會在window的load事件以前執行。因此就有可能出現腳本執行順序被打亂 的狀況；每個defer屬性的腳本都是在頁面解析完畢以後，按照本來的順序執行，同時會在document的DOMContentLoaded以前執 行。

  • 這兩個屬性會有三種可能的組合：

    若是async爲true，那麼腳本在下載完成後異步執行。
    若是async爲false，defer爲true，那麼腳本會在頁面解析完畢以後執行。
    若是async和defer都爲false，那麼腳本會在頁面解析中，中止頁面解析，馬上下載而且執行。