JSコード最適化

41284 ワード

もっと読む
1、文字列のつづり合わせ
配列joinの方法で+=の代わりに、実行効率を向上させることができます.

例:

  
  
  
  

   
   
   
   class="one" id="one">
   

   
   
   
   
"button" value="   " onclick="func1()" />   


   
   
   
   
"button" value="   " onclick="func2()" />

  
  
  
  

   
   
   
   //       

   
   
   
   
function func1(){   


   
   
   
   
    var start = new Date().getTime();   


   
   
   
   
    var template = "";   


   
   
   
   
    for(var i = 0; i 


   
   
   
   
        template += "";   


   
   
   
       }   

   
   
   
   
    var end = new Date().getTime();   


   
   
   
   
    document.getElementById("one").innerHTML = template;   


   
   
   
   
    alert("  :" + (end - start) + "  ");   


   
   
   
   }   

   
   
   
   
//       


   
   
   
   
function func2(){   


   
   
   
   
    var start = new Date().getTime();   


   
   
   
   
    var array = [];   


   
   
   
   
    for(var i = 0; i 


   
   
   
   
        array[i] = "";   


   
   
   
       }   

   
   
   
   
    var end = new Date().getTime();   


   
   
   
   
    document.getElementById("one").innerHTML = array.join("");   


   
   
   
   
    alert("  :" + (end - start) + "  ");   


   
   
   
   }

  
  
  
  
  
  
  
  
   
   
   
   

  
  
  
  
  
  
  
  

   
   
   
       
    
    
    

     
     
     
     2、for  
     for     ，            ，                。     for      ，               ，                  ，           ，          
    

     
     
     
     

       
       
       
       

        
        
        
        var arr = [];   

        
        
        
        
for(var i = 0; i 


        
        
        
        
    arr[i] = "" + i + "
";   


        
        
        
        }   

        
        
        
        
document.body.innerHTML += arr.join("");   


        
        
        
            

        
        
        
        
//       


        
        
        
        
function func1(){   


        
        
        
        
    var divs = document.getElementsByTagName("div");   


        
        
        
        
    var start = new Date().getTime();   


        
        
        
        
    for(var i = 0; i 


        
        
        
        
        //"   "   


        
        
        
            }   

        
        
        
        
    var end = new Date().getTime();   


        
        
        
        
    alert("  ：" + (end - start) + "  ");   


        
        
        
        }   

        
        
        
        
//       


        
        
        
        
function func2(){   


        
        
        
        
    var divs = document.getElementsByTagName("div");   


        
        
        
        
    var start = new Date().getTime();   


        
        
        
        
    for(var i = 0, len = divs.length; i 


        
        
        
        
        //"   "   


        
        
        
            }   

        
        
        
        
    var end = new Date().getTime();   


        
        
        
        
    alert("  ：" + (end - start) + "  ");   


        
        
        
        } 

       
       
       
       

    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    

     
     
     
           
      
      
      

       
       
       
       2、for  
     for     ，            ，                。     for      ，               ，                  ，           ，          
    

       
       
       
       

         
         
         
         

          
          
          
          var arr = [];   

          
          
          
          
for(var i = 0; i 


          
          
          
          
    arr[i] = "" + i + "
";   


          
          
          
          }   

          
          
          
          
document.body.innerHTML += arr.join("");   


          
          
          
              

          
          
          
          
//       


          
          
          
          
function func1(){   


          
          
          
          
    var divs = document.getElementsByTagName("div");   


          
          
          
          
    var start = new Date().getTime();   


          
          
          
          
    for(var i = 0; i 


          
          
          
          
        //"   "   


          
          
          
              }   

          
          
          
          
    var end = new Date().getTime();   


          
          
          
          
    alert("  ：" + (end - start) + "  ");   


          
          
          
          }   

          
          
          
          
//       


          
          
          
          
function func2(){   


          
          
          
          
    var divs = document.getElementsByTagName("div");   


          
          
          
          
    var start = new Date().getTime();   


          
          
          
          
    for(var i = 0, len = divs.length; i 


          
          
          
          
        //"   "   


          
          
          
              }   

          
          
          
          
    var end = new Date().getTime();   


          
          
          
          
    alert("  ：" + (end - start) + "  ");   


          
          
          
          } 

         
         
         
         

      
      
      
      
      
      
      
      
       
       
       
       

      
      
      
      
      
      
      
      
       
       
       
       

      
      
      
      
3、ページの き しを らす
var str = これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です.これはテスト   です. 「つらら」    //  の い   
   func 1(){   
    var OB = Dcument.getElemenntById(「one」)   
    var start = new Date().getTime();   
    for(var) i = 0; i 
        Obj.inners HTML += str + i;        }        var end = new Date().getTime();   
    alert(「 う 」 " + (end - start + " ミリ    
)    //  のいい   
   func 2(){   
    var OB = Dcument.getElemenntById(「one」)   
    var start = new Date().getTime();   
    var アール = []   
    for(var) i = 0; i 
        アール[i] = str + i;        }        Obj.inners HTML = arr.join(");   
    var end = new Date().getTime();   
    alert(「 う 」 " + (end - start + " ミリ    
) 	
ページの   に  を えるのは、innerHTMLだけではなく、  のスタイルや  などを えると、ページの   がトリガされます.

jsアナログクリックイベント実現コード