当前位置:编程学习 > JAVA >>

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 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,