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

时间 2020-07-24

原文原文链接

三、减小页面的重绘
减小页面重绘虽然本质不是JS自己的优化，可是其每每是由JS引发的，而重绘的状况每每是严重影响页面性能的，因此彻底有必要拿出来，咱们看下面例子：javascript

 
         < 
         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次的循环，咱们看看下面的执行结果。html

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，若是改变元素的样式，位置等状况都会触发页面重绘，因此在平时必定要注意这点。java