码迷,mamicode.com
首页 > 其他好文 > 详细

DocumentFragments

时间:2018-01-24 15:22:34      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:i++   一个   rip   写法   create   box   end   生成   循环   

var fragment = document.createDocumentFragment();

  引用mdn的描述:fragment是一个空文档对象DocumentFragment对象的引用。

 

  常用在保存生成的dom节点上:

循环生成节点并插入dom中
    var box = document.getElementById("box");
for(var i=0; i<10; i++) { var div = document.createElement("div"); box.appendChild(div); }

  上面这种写法每次生成的dom节点再插入dom中,都会引起页面的重排,耗费性能。

 

  下面用DocumentFragments改进:

    var box = document.getElementById("box"),
          fragment = document.createDocumentFragment();
    
    for(var i=0; i<10; i++) {
       var div = document.createElement("div");
       fragment.appendChild(div);          
    }

    box.appendChild(fragment);

  

  因为生成fragment(文档片段)存在于内存中,并不在Dom树中,所以将子元素插入到文档片段时不会引起页面重排。

  documentFragment被所有主流浏览器支持

DocumentFragments

标签:i++   一个   rip   写法   create   box   end   生成   循环   

原文地址:https://www.cnblogs.com/wlgz/p/8341461.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!