innerHTML字符串拼接

通過innerHTML的方式一般來說比通過構造節點的方式效率高的多，不過構造innerHTML字符串的過程也是一個值得優化的過程。比如我現在要通過一個數組，來拼接100個列表項的innerHTML， 我們可以有幾種不同的方式來構造，但是效率上可能會不同。

我們先構造一個數組用於待會要拼接的數據

 
          // 
          構造100條數據 
          
 
          var datas = []; 
          
 
          for( 
          var i = 1; i <=100; i++){ 
          
    datas.push('item' + i); 
          
} 
         

 第一種最直接的，也是初學者就會想到的方式，所有項都直接用字符串拼接的方式，當然效率也最差了

 
          var resultHtml = ''; 
          
 
          for( 
          var i = 0, len = datas.length; i < len; i++){ 
          
    resultHtml += '<li>' + datas[i] + '</li>'; 
          
} 
          
resultHtml = '<ul>' + resultHtml + '</ul>' 
         

 第二種稍微高級一點，有考慮過效率問題的基本會采用這種，用數組的方式把每一項壓進去，最后join一下

 

 
          var resultHtml = ''; 
          
 
          var tempDatas = []; 
          
 
          for( 
          var i = 0, len = datas.length; i < len; i++){ 
          
    tempDatas.push('<li>' + datas[i] + '</li>'); 
          
} 
          
resultHtml = '<ul>' + tempDatas.join('') + '</ul>'; 
         

 第三種其實也簡單，只是有些人可能會想不到,當然效率也最高

 
          var resultHtml = datas.join('</li><li>'); 
          
resultHtml = '<ul><li>' + resultHtml + '</li></ul>'; 
         

 說了以上那些，不同的字符串穿拼接方式，其實也就弄弄花哨罷了，現代瀏覽器其實都已做的特別好了，所以就算你是直接用+號連接字符串，效率也不差了，甚至在有的瀏覽器中比用數組的方式快，早期的瀏覽器用數組比較好