博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
createDocumentFragment学习
阅读量:4709 次
发布时间:2019-06-10

本文共 1414 字,大约阅读时间需要 4 分钟。

DocumentFragment:表示文档的一部分(或一段),更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。

DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。
不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
可以用Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。
说明:添加多个dom元素时,先将元素append到DocumentFragment中,最后统一将DocumentFragment添加到页面。 该做法可以减少页面渲染dom元素的次数.

 

function ce(){                var start_time = new Date();                for(var i = 0; i<10000; i++){                    var p = document.createElement('p');                    document.body.appendChild(p);                }                var end_time = new Date();                console.log(end_time.getTime() - start_time.getTime());            }                        function frag(){                var start_time = new Date(),                frag = document.createDocumentFragment();                for(var i = 0; i<10000 ; i++){                    var p = document.createElement('p');                    frag.appendChild(p);                }                document.body.appendChild(frag);                var end_time = new Date();                console.log(end_time.getTime() - start_time.getTime())                        }

  通过以上的代码测试了一遍,使用createDocumentFragment在append次数比较大的时候,性能确实有所提升。

转载于:https://www.cnblogs.com/YeRenMing/archive/2013/05/12/3074649.html

你可能感兴趣的文章
[Fiddler] 开启Fiddler抓包的时候产品报“证书错误”
查看>>
打包苦逼活
查看>>
Oracle Certified Java Programmer 经典题目分析(二)
查看>>
第二十五章补充内容 17位字段
查看>>
灰色预测
查看>>
css随笔
查看>>
基于自己封装的select下拉选择的省市区三级联动效果,兼容IE
查看>>
初识Python
查看>>
nodejs+mysql入门实例(改)
查看>>
表达式语言
查看>>
jQuery EasyUI实现关闭全部tabs
查看>>
iOS项目之WKWebView替换UIWebView相关
查看>>
Lambda表达式效率问题
查看>>
【转载】iOS 设置Launch Image 启动图片(适用iOS9)
查看>>
最快得到MYSQL两个表的差集
查看>>
UML类图关系
查看>>
清理Visual Studio打开的项目和文件、查找和最近引用组件痕迹
查看>>
正则表达式速查表
查看>>
项目开源-基于ASP.NET Core和EF Core的快速开发框架
查看>>
UVA 580 - Critical Mass(简单DP)
查看>>