• 提高网页打开速度的方法

    如果一次载入所有需要的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文件");   
}
  • 相关阅读:
    HDU 2010 水仙花数
    HDU 2009 求数列的和
    HDU 2008 数值统计
    Nginx实现反向代理
    vue-router 实现分析
    区分slice,splice和split方法
    notify()和notifyAll()主要区别
    移动端页面兼容性问题解决方案整理
    clearfix的用法
    前端js面试题
  • 原文地址：https://www.cnblogs.com/ranzige/p/3822276.html
Copyright © 2020-2023  润新知