不必要的DOM操作

自己实践+百度   小小的总结一下吧

 

例如下面这段代码：

 
 
// anti-pattern  
for (var i = 0; i < 100; i++){  
   var li = $("<li>").html("This is list item #" + (i+1));  
   $("#someUL").append(li);  
} 

这段代码对DOM进行了100次修改，并且创建了100个不必要的jQuery对象。正确的做法是使用一个文档片段，或者创建一个字符串，把100个<li>元素赋给该字符串。然后附加到HTML中。这样就只需运行DOM一次，代码如下：

 
 
var liststring = "";  
for (var i = 100; i > 0; i--){  
   liststring += "<li>This is list item #" + (99- i);  
}  
document.getElementById("someUL").innerHTML(liststring); 

正如上面所描述的一样，下面再提供一个方式，使用数组：

 
 
var liststring = "<li>" 
var lis = [];  
for (var i = 100; i > 0; i--){  
   lis.push("This is list item #" + (99- i));  
}  
liststring += lis.join("</li><li>") + "</li>";  
document.getElementById("someUL").innerHTML(liststring); 

这是在JavaScript创建重复HTML最快最简单的方法，无需使用模板库或框架。