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>'; 
 

 说了以上那些，不同的字符串穿拼接方式，其实也就弄弄花哨罢了，现代浏览器其实都已做的特别好了，所以就算你是直接用+号连接字符串，效率也不差了，甚至在有的浏览器中比用数组的方式快，早期的浏览器用数组比较好