提高网页打开速度的方法

如果一次载入所有需要的JavaScript代码会造成初始网页打开速度变慢，而且很多载入的代码并不需要使用，这种无谓的性能浪费应该 避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点，并将此结点的src属性（即 外联 Javascript文件）设置为需要动态载入的JavaScript代码。


下面是一个完成这样功能的例子。

(1)、新建JsLoaderTest.html文件

Java代码 复制代码 收藏代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>按需载入JavaScript代码的例子</title>  
  5. <script type="text/javascript">  
  6.     function JsLoader(){  
  7.   
  8.    this.load=function(url){  
  9.             //获取所有的<script>标记  
  10.             var ss=document.getElementsByTagName("script");  
  11.             //判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回  
  12.             for (i=0;i<ss.length;i++){  
  13.                 if (ss[i].src && ss[i].src.indexOf(url)!=-1){  
  14.                     this.onsuccess();  
  15.                     return;  
  16.                 }  
  17.             }  
  18.             //创建script结点,并将其属性设为外联JavaScript文件  
  19.             s=document.createElement("script");  
  20.             s.type="text/javascript";  
  21.             s.src=url;  
  22.             //获取head结点，并将<script>插入到其中  
  23.             var head=document.getElementsByTagName("head")[0];  
  24.             head.appendChild(s);  
  25.              
  26.             //获取自身的引用  
  27.             var self=this;  
  28.             //对于IE浏览器，使用readystatechange事件判断是否载入成功  
  29.             //对于其他浏览器，使用onload事件判断载入是否成功  
  30.             //s.onload=s.onreadystatechange=function(){  
  31.             s.onload=s.onreadystatechange=function(){  
  32.                 //在此函数中this指针指的是s结点对象，而不是JsLoader实例,  
  33.                 //所以必须用self来调用onsuccess事件，下同。  
  34.                 if (this.readyState && this.readyState=="loading") return;  
  35.                 self.onsuccess();  
  36.             }  
  37.             s.onerror=function(){  
  38.                 head.removeChild(s);  
  39.                 self.onfailure();  
  40.             }  
  41.         };  
  42.         //定义载入成功事件  
  43.         this.onsuccess=function(){};  
  44.         //定义失败事件  
  45.         this.onfailure=function(){};  
  46.     }  
  47.      
  48.     function btnClick(){  
  49.             //创建对象  
  50.         var jsLoader=new JsLoader();  
  51.      
  52.         //定义载入成功处理程序  
  53.         jsLoader.onsuccess=function(){  
  54.              sayHello();  
  55.         }  
  56.      
  57.         //定义载入失败处理程序  
  58.         jsLoader.onfailure=function(){  
  59.              alert("文件载入失败！");  
  60.         }  
  61.      
  62.         //开始载入  
  63.         jsLoader.load("hello.js");  
  64.     }  
  65.   
  66. </script>  
  67. </head>  
  68.   
  69. <body>  
  70. <label>  
  71. <input type="submit" name="Submit" onClick="javascript:btnClick()" value="载入JavaScript文件">  
  72. </label>  
  73. </body>  
  74. </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");
            //判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回
            for (i=0;i<ss.length;i++){
                if (ss[i].src && ss[i].src.indexOf(url)!=-1){
                    this.onsuccess();
                    return;
                }
            }
            //创建script结点,并将其属性设为外联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(){
                //在此函数中this指针指的是s结点对象，而不是JsLoader实例,
                //所以必须用self来调用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(){
            //创建对象
        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文件,包含如下代码：

Java代码 复制代码 收藏代码
  1. // JavaScript Document  
  2. function sayHello(){  
  3.     alert("Hello World!成功载入JavaScript文件");     
  4. }  
// JavaScript Document
function sayHello(){
    alert("Hello World!成功载入JavaScript文件");   
}
posted @ 2014-07-03 14:08  技术狂  阅读(1255)  评论(2)  编辑  收藏  举报