如何優化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