非阻塞載入指令碼

iteye_3829發表於2013-05-18
指令碼

1.HTML5實現了script的async屬性，這個新的屬性可以讓js在瀏覽器中以非阻塞的模式載入，另外script還有一個defer屬性，這個屬性目前所有瀏覽器都已實現（除了firefox和chrome的早期版本），IE這方面做得好，從一開始就支援些屬性。

   1: //async
<!--CRLF--> 
   2: <script async src="dquery.js" async></script>
   1:  
    <!--CRLF-->
   2: //defer
    <!--CRLF-->
   3: <script async src="dquery.js" defer>
    <!--CRLF--></script>
<!--CRLF-->

2.async和defer的區別：

帶有async或者defer的script都會立刻下載並不阻塞頁面解析,而且都提供一個可選的onload事件處理, 在script下載完成後呼叫,用於做一些和此script相關的初始化工作。它的不同之處在於async一旦下載完成就立即執行（在window.onload事件之前），不確保執行的順序，而defer能確保js是在按照其在頁面中的順序執行（在DOMContentLoaded事件之前）。

3.為了解決瀏覽器相容問題可以使用下面的程式碼進行處理

   1: function lazyload() {
<!--CRLF--> 
   2:      var elem = document.createElement("script");
<!--CRLF--> 
   3:      elem.type = "text/javascript";
<!--CRLF--> 
   4:      elem.async = true;
<!--CRLF--> 
   5:      elem.src = "js/dquery.js?v=11"; //對應的JS檔案
<!--CRLF--> 
   6:      document.body.appendChild(elem);
<!--CRLF--> 
   7:  }
<!--CRLF--> 
   8:
<!--CRLF--> 
   9:  if (window.addEventListener) {
<!--CRLF--> 
  10:      window.addEventListener("load", lazyload, false);
<!--CRLF--> 
  11:  } else if (window.attachEvent) {
<!--CRLF--> 
  12:      window.attachEvent("onload", lazyload);
<!--CRLF--> 
  13:  } else {
<!--CRLF--> 
  14:      window.onload = lazyload;}
<!--CRLF-->

由於是非同步載入所以使用相應js內容就需要在window.onload事件中使用，直接寫在頁面中會報指令碼錯誤，如：

image

相關文章