如何优化js代码(3)——减少页面的重绘

最新推荐文章于 2022-08-04 09:57:51 发布

weixin_34344403

最新推荐文章于 2022-08-04 09:57:51 发布

阅读量173

点赞数

原文链接：http://blog.51cto.com/xiaoahei/1221928

版权

3、减少页面的重绘
减少页面重绘虽然本质不是JS本身的优化，但是其往往是由JS引起的，而重绘的情况往往是严重影响页面性能的，所以完全有必要拿出来，我们看下面例子：

 
          < 
          div  
          id 
          = 
          "demo" 
          ></ 
          div 
          > 
         
 
          < 
          input  
          type 
          = 
          "button"  
          value 
          = 
          "效率低"  
          onclick 
          = 
          "func1()" 
          /> 
         
 
          < 
          input  
          type 
          = 
          "button"  
          value 
          = 
          "效率高"  
          onclick 
          = 
          "func2()" 
          /> 
         

 
          var  
          str =  
          "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>" 
          ; 
         
          //效率低的 
         
          function  
          func1(){ 
         
          var  
          obj = document.getElementById( 
          "demo" 
          ); 
         
          var  
          start =  
          new  
          Date().getTime(); 
         
          for 
          ( 
          var  
          i = 0; i < 100; i++){ 
         
          obj.innerHTML += str + i; 
         
          } 
         
          var  
          end =  
          new  
          Date().getTime(); 
         
          alert( 
          "用时 " 
          + (end - start) +  
          " 毫秒" 
          ); 
         
          } 
         
          //效率高的 
         
          function 
          func2(){ 
         
          var  
          obj = document.getElementById( 
          "demo" 
          ); 
         
          var  
          start =  
          new  
          Date().getTime(); 
         
          var  
          arr = []; 
         
          for 
          ( 
          var  
          i = 0; i < 100; i++){ 
         
          arr[i] = str + i; 
         
          } 
         
          obj.innerHTML = arr.join( 
          "" 
          ); 
         
          var  
          end =  
          new  
          Date().getTime(); 
         
          alert( 
          "用时 " 
          + (end - start) +  
          " 毫秒" 
          ); 
         
          }

在例子中，我只是用了100次的循环，因为如果用10000次循环的话，浏览器基本上就卡住不动了，但是即使是100次的循环，我们看看下面的执行结果。

IE6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	842ms	842ms	843ms	843ms	842ms	842.4ms
func2	16ms	0ms	16ms	0ms	16ms	9.6ms
Firefox4.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	3126ms	3098ms	3109ms	3133ms	3022ms	3097ms
func2	59ms	59ms	59ms	58ms	58ms	58ms
Chrome6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	294ms	297ms	296ms	297ms	313ms	299ms
func2	0ms	4ms	5ms	4ms	0ms	2.6ms

可以看到的是，这简直是一个惊人的结果，仅仅100次的循环，不管是在什么浏览器下，都出现了如此之大的差别，另外我们还发现，在这里，IE6的执行效率居然比起Firefox还要好很多，可见Firefox在页面重绘这方面并没有做一些的优化。这里还要注意的是，一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘，所以在平时一定要注意这点。

转载于:https://blog.51cto.com/xiaoahei/1221928