zoukankan      html  css  js  c++  java
  • js性能优化(二)

    http://huazi.tcreator.info/?p=450
    优化1:function用法:
    测试代码:
    //代码优化1: function用法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
     var t1=new Date().getTime();
     for(var i=0;i<4000;i++){
     var func1 = new Function("return arguments[0] + arguments[1]");
     var a=func1(10, 20); 
     }
     var t2=new Date().getTime();
     var t3=new Date().getTime();
     for(var i=0;i<4000;i++){
     var func2 = function(){ return arguments[0] + arguments[1] };
     func2(10, 20); 
     }
     var t4=new Date().getTime();
     alert("T1:"+(t2-t1)+";T2:"+(t4-t3));

    上面第一中,new Function生成方法的方式,在3大浏览器下面性能均低于第二种,但是在google浏览器下性能极其低

    优化2:函数作用域链:
    测试代码:
    //代码优化2: 函数作用域链

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    var doc=document;
     var t1=new Date().getTime();
     for(var i=0;i<10000;i++){
    	document.getElementsByTagName("img")[0].style.width="100px";
    	document.getElementsByTagName("img")[0].style.height="100px";
     }
     var t2=new Date().getTime();
     var t3=new Date().getTime();
     for(var i=0;i<10000;i++){
    	doc.getElementsByTagName("img")[0].style.width="100px";
    	doc.getElementsByTagName("img")[0].style.height="100px";
     }
     var t4=new Date().getTime();
     alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
     /*
    ie:T1:157;T2:113;
    ff:T1:76;T2:77;
    google:29;T2:14;
    */

    从上面的输出时间可以看出,ie,google下第二种方法性能都有不少提升,火狐下这2种方法在性能上貌似不相上下,不过综合起来还是第二种,性能更好
    document为全局变量,在变量中时处于层级最深的一层,访问全局变量的速度要慢于局部变量,如果在对全局变量操作很多的情况下,可以把全局变量先保存在一个变量中,引用这个变量,就不会一直不断的访问这个变量,所以在性能上也能提高不少

    再把上面代码改成如下形式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
     var t1=new Date().getTime();
     var doc=document;
     function a(){
       for(var i=0;i<10000;i++){
    	  doc.getElementsByTagName("img")[0].style.width="100px";
    	  doc.getElementsByTagName("img")[0].style.height="100px";
       }
     }
     a();
     var t2=new Date().getTime();
     var t3=new Date().getTime();
     function b(){
       var doc=document;
       for(var i=0;i<10000;i++){
    	  doc.getElementsByTagName("img")[0].style.width="100px";
    	  doc.getElementsByTagName("img")[0].style.height="100px";
       }
     }
     b();
     var t4=new Date().getTime();
     alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
      /*
    ie:T1:132;T2:107;
    ff:T1:77;T2:75;
    google:23;T2:13;
    */

    下面这个用局部变量的方式引用doc的性能比上面用全局变量document的性能要高,所以我们用局部变量“doc”取代全局变量“document”,这样可以改进性能,尤其是对于大量使用全局变量的函数里面。

    优化3:字符串连接:
    测试代码:
    //代码优化3:字符串连接

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
     var t1=new Date().getTime();
     for(var i=0;i<10000;i++){
    	 var str="";
    	 str += "str1" + "str2";
    	 //str +="str1"
     	 //str +="str2"
     }
     var t2=new Date().getTime();
     var t3=new Date().getTime();
     for(var i=0;i<10000;i++){
    	var str="",str_array=[];
     	str_array.push("str1");
     	str_array.push("str2");
     	str=str_array.join("");
     }
     var t4=new Date().getTime();
     alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
     
      /*
    ie:T1:7;T2:37;
    ff:T1:1;T2:2;
    google:1;T2:5;
    */

    上面代码,str += “str1″ + “str2″;这种连接方式和 str +=”str1″;str +=”str2″的性能一样,而且都高于第二种用数组进行字符串连接操作(并不像上面参考网址上面说的,下面数组进行字符串连接方法会高于第一种方法)

    优化4:缓冲数据:
    测试代码:
    //代码优化4:缓冲数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
     var str1="1234rtyu67889", arr1 = []; 
     var t1=new Date().getTime();
     for(var x=0;x<10000;x++){
    	 for(var i = 0,j=0; i <= str1.length; i++){ 
     		arr1.push( str1.charAt(i)); 
     	}
     }
     var t2=new Date().getTime();
     var str2="1234rtyu67889", arr2 = []; 
     var t3=new Date().getTime();
     for(var k=0;k<10000;k++){
    	  for(var i = 0,j=str2.length; i <= j; i++){ 
     		arr2.push( str2.charAt(i)); 
     	}
     }
     var t4=new Date().getTime();
     alert("T1:"+(t2-t1)+";T2:"+(t4-t3));
       /*
    ie:T1:181;T2:170;
    ff:T1:5;T2:4;
    google:25;T2:4;
    */

    上面第二组写法要优于第一种
    上面这个代码,主要测试for循环里面的length用法,在对字符串或者数组进行操作时,如果长度值不会变化,再进行for循环时,可以按照下上面第二章方法做,先把字符串长度保存在一个临时变量里面,这样可以减少每次读取字符串长度的次数,从而提高代码性能

  • 相关阅读:
    周末之个人杂想(十三)
    PowerTip of the DaySorting Multiple Properties
    PowerTip of the DayCreate Remoting Solutions
    PowerTip of the DayAdd Help to Your Functions
    PowerTip of the DayAcessing Function Parameters by Type
    PowerTip of the DayReplace Text in Files
    PowerTip of the DayAdding Extra Information
    PowerTip of the DayPrinting Results
    Win7下IIS 7.5配置SSAS(2008)远程访问
    PowerTip of the DayOpening Current Folder in Explorer
  • 原文地址:https://www.cnblogs.com/lbangel/p/3135151.html
Copyright © 2011-2022 走看看