首页 > 代码库 > 提高网页打开速度的方法

提高网页打开速度的方法

2024-07-10 17:38:30   227人阅读

如果一次载入所有需要的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=http://www.mamicode.com/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=http://www.mamicode.com/"载入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=http://www.mamicode.com/url;"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="http://www.mamicode.com/载入JavaScript文件"></label></body></html>


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

Java代码 复制代码 收藏代码
  1. // JavaScript Document  
  2. function sayHello(){  
  3.     alert("Hello World!成功载入JavaScript文件");     
  4. }  
// JavaScript Documentfunction sayHello(){    alert("Hello World!成功载入JavaScript文件");   }


联系
我们