動態(tài)載入js提高網(wǎng)頁打開速度的方法

更新時間：2014年07月04日 14:50:10 投稿：shichen2014

這篇文章主要介紹了動態(tài)載入js提高網(wǎng)頁打開速度的方法,需要的朋友可以參考下

一般來說如果一次性的載入所有需要的JavaScript代碼，就會造成初始網(wǎng)頁打開速度變慢，但是很多載入的代碼又并不需要使用，這種無謂的性能浪費應該予以避免。如果要動態(tài)載入JavaScript代碼,可以利用DOM模型在HTML文檔中添加<script>結點，并將此結點的src屬性（即外聯(lián) Javascript文件）設置為需要動態(tài)載入的JavaScript代碼。

下面就是完成這樣功能的一個示例：

(1)、新建JsLoaderTest.html文件

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>按需載入JavaScript代碼的例子</title> 
<script type="text/javascript"> 
  function JsLoader(){ 
  this.load=function(url){ 
      //獲取所有的<script>標記 
      var ss=document.getElementsByTagName("script"); 
      //判斷指定的文件是否已經(jīng)包含，如果已包含則觸發(fā)onsuccess事件并返回 
      for (i=0;i<ss.length;i++){ 
        if (ss[i].src && ss[i].src.indexOf(url)!=-1){ 
          this.onsuccess(); 
          return; 
        } 
      } 
      //創(chuàng)建script結點,并將其屬性設為外聯(lián)JavaScript文件 
      s=document.createElement("script"); 
      s.type="text/javascript"; 
      s.src=url; 
      //獲取head結點，并將<script>插入到其中 
      var head=document.getElementsByTagName("head")[0]; 
      head.appendChild(s); 
      //獲取自身的引用 
      var self=this; 
      //對于IE瀏覽器，使用readystatechange事件判斷是否載入成功 
      //對于其他瀏覽器，使用onload事件判斷載入是否成功 
      //s.onload=s.onreadystatechange=function(){ 
      s.onload=s.onreadystatechange=function(){ 
        //在此函數(shù)中this指針指的是s結點對象，而不是JsLoader實例, 
        //所以必須用self來調(diào)用onsuccess事件，下同。 
        if (this.readyState && this.readyState=="loading") return; 
        self.onsuccess(); 
      } 
      s.onerror=function(){ 
        head.removeChild(s); 
        self.onfailure(); 
      } 
    }; 
    //定義載入成功事件 
    this.onsuccess=function(){}; 
    //定義失敗事件 
    this.onfailure=function(){}; 
  } 
  function btnClick(){ 
      //創(chuàng)建對象 
    var jsLoader=new JsLoader(); 
    //定義載入成功處理程序 
    jsLoader.onsuccess=function(){ 
       sayHello(); 
    } 
    //定義載入失敗處理程序 
    jsLoader.onfailure=function(){ 
       alert("文件載入失??！"); 
    } 
    //開始載入 
    jsLoader.load("hello.js"); 
  } 
</script> 
</head> 
<body> 
<label> 
<input type="submit" name="Submit" onClick="javascript:btnClick()" value="載入JavaScript文件"> 
</label> 
</body> 
</html>

(2)、新建hello.js文件,包含如下代碼：

// JavaScript Document 
function sayHello(){ 
  alert("Hello World!成功載入JavaScript文件");   
} 
// JavaScript Document
function sayHello(){
  alert("Hello World!成功載入JavaScript文件");  
}

您可能感興趣的文章: