javascript创建文档碎片节点

在《javascript高级程序设计》一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法:

· crateAttribute(name):        用指定名称name创建特性节点

· createComment(text):       创建带文本text的注释节点

· createDocumentFragment():    创建文档碎片节点

· createElement(tagname):       创建标签名为tagname的节点

· createTextNode(text):         创建包含文本text的文本节点

其中最感兴趣且以前没有接触过的一个方法是createComment(text)方法,书中介绍说:在更新少量节点的时候可以之间向document.body节点中添加,但是当要向document中添加大量数据是,如果诸葛添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会调用父节点的appendChild()方法,为了解决这个问题,可以使用一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到document中。

加入想创建十个段落,使用常规的方式可能会写出这样的代码:

        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);
            }
        }

当然,这段代码运行是没有问题,但是他调用了1000document.body.appendChild(),每次都要产生一次页面渲染。这时碎片就十分有用了:

       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
        }

在这段代码中,每个新的<p />元素都被添加到文档碎片中,然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档碎片本省追加到body元素中,而是仅仅追加碎片中的子节点,然后可以看到明显的性能提示,document.body.appenChild()一次替代十次,着一位着只需要进行一个内容渲染刷新。

<!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> 

你可能感兴趣的:(JavaScript)