美文网首页
document.createDocumentFragment

document.createDocumentFragment

作者: Gary嘉骏 | 来源:发表于2017-09-09 22:45 被阅读0次

    应用场景

    向document中添加大量节点时,每次插入都会让页面渲染一次,很耗费性能,如下:

    for(var i = 0 ; i < 10; i ++) {
        var p = document.createElement("p");
        var oTxt = document.createTextNode("段落" + i);
        p.appendChild(oTxt);
        document.body.appendChild(p);
    }
    

    这时碎片就十分有用了:

    var oFragment = document.createDocumentFragment();
    for(var i = 0 ; i < 10; i ++) {
        var p = document.createElement("p");
        var oTxt = document.createTextNode("段落" + i);
        p.appendChild(oTxt);
        oFragment.appendChild(p);<br>}
        
    document.body.appendChild(oFragment);
    

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

    如果觉得文章对你有点用的话,麻烦拿出手机,这里有一个你我都有的小福利(每天一次): 打开支付宝首页搜索“8601304”,即可领红包。谢谢支持

    相关文章

      网友评论

          本文标题:document.createDocumentFragment

          本文链接:https://www.haomeiwen.com/subject/oknajxtx.html