认识createDocumentFragment
今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。
DocumentFragments
是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。
因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用(better performance)。
比如动态添加多个文本节点或者元素节点时,调用多次document.body.append(),每次都要刷新页面一次。效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要一次页面刷新就可。
他支持以下DOM2方法:
a, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2属性:
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.
下面是2段测试程序:
var d1 = new Date();
//创建十个段落,常规的方式
for(var i = 0 ; i < 1000; i ++) {
var p = document_createElement_x_x_x("p");
var oTxt = document_createTextNode("段落" + i);
p.a(oTxt);
document.body.a(p);
}
var d2 = new Date();
document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));
//使用了createDocumentFragment()的程序
var d3 = new Date();
var pFragment = document_createDocumentFragment();
for(var i = 0 ; i < 1000; i ++) {
var p = document_createElement_x_x_x("p");
var oTxt = document_createTextNode("段落" + i);
p.a(oTxt);
pFragment.a(p);
}
document.body.a(pFragment);
var d4 = new Date();
document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));
注:document_createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
本文部分内容摘自《莫尘的博客》,链接地址:http://blog.sina.com.cn/s/blog_667a8c2f010113zw.html
认识createDocumentFragment的更多相关文章
- createElement与createDocumentFragment的点点区别
在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...
- 【笔记】科普createDocumentFragment() 创建文档碎片节点
上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢? 大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法 createDocumentF ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- document的createDocumentFragment()方法
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- ocument的createDocumentFragment()方法
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃
documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...
- createDocumentFragment
http://www.cnblogs.com/myjavascript/p/3708920.html 对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的j ...
- js学习日记 (1)createDocumentFragment() ES6 => 箭头
只能说是会用和记载,深入理解还需时间. 有关性能优化: 使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点. 使用情况: 提取文档中的某个小部分,修改文 ...
- 浅析document.createDocumentFragment()与js效率
对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...
- document.createDocumentFragment 方法
基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...
随机推荐
- BZOJ5109 CodePlus 2017大吉大利,晚上吃鸡!(最短路+拓扑排序+bitset)
首先跑正反两遍dij求由起点/终点到某点的最短路条数,这样条件一就转化为f(S,A)*f(T,A)+f(S,B)*f(T,B)=f(S,T).同时建出最短路DAG,这样图中任何一条S到T的路径都是最短 ...
- CSS3边框会动的信封
<!DOCTYPE html><html> <head> <title>酷炫的CSS3</title> <meta charset=& ...
- D. Equalize the Remainders (set的基本操作)
D. Equalize the Remainders time limit per test 3 seconds memory limit per test 256 megabytes input s ...
- 怎么利用idea自带的工具,不需要 重启tomcat或则其他服务,js代码自动生效
idea中有一个工具:可以直接upload,能让你修改的界面直接可以看到,不需要重启服务. 依次点击的按钮如下: 点击进入的界面这个填的只是一个示例,在各位的电脑上肯定不行,大家依据实际情况填写.
- postfix导致maillog填满磁盘空间的巨坑!
双休日回家pull在公司修改的代码...于是菜鸟的linux探索之路开始了 1.df -f发现磁盘又占满了(之前是node的error) 2.发现maillog整整10个G,无数条(Jul 7 04: ...
- 动态规划:DAG-嵌套矩形
据说DAG是动态规划的基础,想一想还真的是这样的,动态规划的所有状态和转移都可以归约成DAG DAG有两个典型模型,一个是嵌套矩形问题一个是硬币问题,这里仅介绍一个嵌套矩形问题 等二轮复习的时候再补上 ...
- 扑克牌(cards)
扑克牌 思路 这题也是二分!! 我们二分有几套牌,然后再去检验是否符合,至于怎么想到的,不要问我,我也不知道 那么我们主要解决的就是check函数 我们将二分的套数和每种牌的数量进行比较,如果该种牌的 ...
- opencv_人脸检测、模型训练、人脸识别
人脸检测.模型训练.人脸识别 2018-08-15 今天给大家带来一套人脸识别一个小案例,主要是帮助小伙伴们解决如何入门OpenCV人脸识别的问题,现在的AI行业比较火热,AI技术的使用比较广泛.就拿 ...
- C# 反射 名称不区分大小写
一 Type type = Type.GetType(className,false,true); //第一个是“类型的全名”,第二个参数:找不到时触发异常,第三个参数:寻找的时候是否忽略大小写 二 ...
- Python小程序之动态修改Haproxy配置文件
需求如下: 1.动态的查询添加删除haproxy节点信息 2.程序功能:add(添加).Del(删除).Query(查询) 3.添加时实例字符串为: {'backend': 'www.oldboy. ...