[JavaScript]使用document.createDocumentFragment优化性能

如果对客户端动态交互要求比较高,在DOM里需要频繁动态增加元素,那么可能会遇到性能问题,那么就有可能用到DocumentFragment了,具体看看下面的例子,性能差别还是挺大的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title></title>

    
<script type="text/javascript">
        
function slowAdd() {
            
for (var i = 0; i < 10000; i++) {
                
var op = document.createElement("span");
                
var oText = document.createTextNode(i);
                op.appendChild(oText);
                document.body.appendChild(op);
            }
        }

        
function fastAdd(){
            
var oFragmeng = document.createDocumentFragment();  //创建文档碎片
            for (var i = 0; i < 10000; i++) {
                
var op = document.createElement("span");
                
var oText = document.createTextNode(i);
                op.appendChild(oText);
                oFragmeng.appendChild(op);

            }
            document.body.appendChild(oFragmeng); 
//最后一次性添加到document中
        }
    
</script>

</head>
<body>
    
    
<p>
        
<input id="Button1" type="button" value="button" onclick = "slowAdd()"/></p>
    
<p>
       
<input id="Button2" type="button" value="button"  onclick = "fastAdd()"/></p>
    
</body>
</html> 

 参考资源:http://www.cssrain.cn/article.asp?id=1421

posted @ 2009-12-02 15:15 Justin 阅读(...) 评论(...) 编辑 收藏