javascript DOM操作性能-----创建DOM
在很多时候我们都需要创建一系列的元素节点，就像如下的操作一样：
Java代码
var list = document.getElementById('content');
for(var i=0;i<10;i++){
var item = document.createElement('li');
list.appendChild(item);
item.appendChild(document.createTextNode('item'+i));
}
var list = document.getElementById('content');
for(var i=0;i<10;i++){
var item = document.createElement('li');
list.appendChild(item);
item.appendChild(document.createTextNode('item'+i));
}
其实这样的操作效率是很低的，需要不断的区更新DOM，每循环一次就要对页面进行更新，循环少可能不是特别明显，但要是操作多的话，那效率是很成问题的,再看看下面的代码：
Java代码
var list = document.getElementById('content');
var fragment = document.createDocumentFragment();
for(var i=0;i<10;i++){
var item = document.createElement('li');
fragment.appendChild(item);
item.appendChild(document.createTextNode('item'+i));
}
list.appendChild(fragment);
var list = document.getElementById('content');
var fragment = document.createDocumentFragment();
for(var i=0;i<10;i++){
var item = document.createElement('li');
fragment.appendChild(item);
item.appendChild(document.createTextNode('item'+i));
}
list.appendChild(fragment);
这里是先吧所有的元素节点先放到fragment里面，就最后一次性的添加到DOM里面，这里就只做了一次的DOM操作，这样既能提高性能，也能避免因为不停的操作DOM导致页面闪烁的问题，这让我感觉有点想java中的StringBuffer/StringBuilder。
面对上面的问题，我们通常还有另外一种做法，就是用innerHTML的方式，这虽然不是DOM的标准用法，但却是很多人（包括我）都非常喜欢的用法：
Java代码
var createDatagrid = function(rows) {
var html = [];
html.push('<table width="631" border="0" cellspacing="1" cellpadding="0">');
html.push('<tbody'>);
for (var i = 0; i < rows.length; i++) {
html.push('<tr onmouseover=\'this.style.backgroundColor="#FAFAFA";\' onmouseout="this.style.backgroundColor=\'\';" style="text-align:center;">');
html.push('<td align="center" height="22">' + rows[i].user_name + '</td>');
html.push('<td align="center">' + rows[i].type_id+ '</td>');
html.push('<td align="center">' + rows[i].send_time+ '</td>');
html.push('<td align="center">' + rows[i].gps_time)+ '</td>');
html.push('<td align="center">' + rows[i].speed + '</td>');
html.push('<td align="center">' + rows[i].course + '</td>');
html.push('<td align="center">' +rows[i].gps_status+ '</td>');
html.push('</tr>');
}
html.push('</tbody>');
html.push('</table>');
document.getElement.innerHTML = html.join("");
}
var createDatagrid = function(rows) {
var html = [];
html.push('<table width="631" border="0" cellspacing="1" cellpadding="0">');
html.push('<tbody'>);
for (var i = 0; i < rows.length; i++) {
html.push('<tr onmouseover=\'this.style.backgroundColor="#FAFAFA";\' onmouseout="this.style.backgroundColor=\'\';" style="text-align:center;">');
html.push('<td align="center" height="22">' + rows[i].user_name + '</td>');
html.push('<td align="center">' + rows[i].type_id+ '</td>');
html.push('<td align="center">' + rows[i].send_time+ '</td>');
html.push('<td align="center">' + rows[i].gps_time)+ '</td>');
html.push('<td align="center">' + rows[i].speed + '</td>');
html.push('<td align="center">' + rows[i].course + '</td>');
html.push('<td align="center">' +rows[i].gps_status+ '</td>');
html.push('</tr>');
}
html.push('</tbody>');
html.push('</table>');
document.getElement.innerHTML = html.join("");
}
上面这种效率也是很高的，和第二种方法的效率是差不多的，但这种做法并不是基于javascript的DOM的调用，而是通过HTML的解析器使用其内部的DOM调用来创建的，所以他效率不错
摘自 lovebeyond
补充：web前端 , JavaScript ,
