createDocumentFragment()方法的妙用

àì夳堔傛蜴生んèń 2022-06-02 08:28 317阅读 0赞

在更新少量节点的时候可以直接向document.body节点中添加，但是当要向document中添加大量数据时，如果直接添加这些新节点，这个过程非常缓慢，因为每添加一个节点都会调用父节点的appendChild()方法，为了解决这个问题。

可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到document中。
  1. //传统的方法会进行多次页面渲染
  2. window.onload=function (argument) {
  3.         for (var i = 0; i < 10; i++) {
  4.         var p =document.createElement("p");
  5.         var data =document.createTextNode("段落");
  6.         p.appendChild(data);
  7.         document.body.appendChild(p);
  9.         }
  10.     }

使用createDocumentFragment

  1. //新的方法
  2.     window.onload=function (argument) {
  3.         var cdf=document.createDocumentFragment();
  4.         for (var i = 0; i <10; i++) {
  6.             var p =document.createElement("p");
  7.             var data=document.createTextNode("段落");
  8.             p.appendChild(data);
  9.             cdf.appendChild(p);
  11.         }
  12.             document.body.appendChild(cdf);
  13.     }

发表评论

表情：
评论列表 （有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jq---data()方法的妙用

    有这样一种场景：将左侧表格中的内容在点击添加的时候，右侧列表会增加相应的一列数据，然而反过来还需要点击右侧列的删除时相应的对左侧表格中的对应行操作，此时可以用jq的data()

    朱雀朱雀/ 0 赞/ 290 阅读

    相关 void的妙用

    任何表达式都会产生一个值，但是在算数表达式中，如果对计算的值没有进行接收或进行任何其他操作，那么在强制警告的时候编译就会出现警告，此时需要将表达式转为void，表示显示的将该值

    男娘i男娘i/ 0 赞/ 393 阅读