有关文档碎片(document fragment)的使用方法
通常情况下改动、删除或者添加DOM元素。
更新DOM会导致浏览器又一次绘制屏幕,也会导
致reflow,这样会带来巨大的开销。我们通常解决这的办法尽量降低更新DOM。这也就意
味着将DOM的改变分批处理。并在“活动”文档树之外运行这些更新。
当须要创建一个相对照较大的子树。应该在子树全然创建之后再将子树加入到DOM树中。
这时採用文档碎片技术来容纳全部的节点。
//反样例
//在创建时马上加入节点
var p,t;
p = document.createElement('p');
t = document.createTextNode('first p');
p.appendChild(t);
document.body.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second p');
p.appendChild(t);
document.body.appendChild(p);
创建文档碎片来离线升级节点信息是更好的做法。当将文档碎片加入到DOM树时,并非
将碎片加入到DOM树中,而是将文档碎片的内容加入进DOM树中。
文档碎片是一种非常好的
方法,能够用来封装很多节点信息,甚至这些节点并没有合适的父节点。
例如以下演示样例:
var p,t,frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first p');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second p');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);
在上面样例中,活动的文档只更新了一次并触发一次屏幕重绘。而第一个样例中,每
运行一个段落都会重绘一次。
在为DOM树加入新节点时文档碎片是非常实用的。但在更新DOM现有部分时。仍然能够批处理提交改动。
详细的方法是为须要改动的子树的根节点建立一个克隆镜像,然后对克隆镜像做全部的改动操作,在完毕操作后用克隆镜像替换原来的子树。
var old = document.getElementById('result'),
clone = old.cloneNode(true);
old.parentNode.replaceChild(clone,old);
有关文档碎片(document fragment)的使用方法的更多相关文章
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
- document文档碎片
var arrText = ["1","2","3","4","5","6",& ...
- 文档碎片DocumentFragment
文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...
- javascript创建文档碎片节点
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- 文档碎片及xml讲解
1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...
- js文档碎片
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...
随机推荐
- 分析AWR报告
1.AWR报告头信息 DB Name :数据库名字 DBid: 数据库id Elapsed:采样时间段 DB Time:用户操作花费的时间,不包括Oracle后台进程消耗的时间 DB Time远小于E ...
- [源码管理] ubuntu下SVN服务器安装配置
一.SVN安装1.安装包$ sudo apt-get install subversion2.添加svn管理用户及subversion组$ sudo adduser svnuser$ sudo add ...
- 如何卸载Win10自带Xbox、人脉、天气等应用?
Win10中的Modern应用一般可在右键菜单中进行卸载,不过某些自带的Modern应用,比如Xbox.天气.人脉.照片等应用是无法在右键菜单中进行卸载的.如果你有卸载这些应用的需求,可参考下面的方法 ...
- LeetCode Weekly Contest 19
1.504. Base 7 水题,直接写.但是我错了一次,忘了处理0的情况. 没有考虑边界条件.写完代码,一般需要自己想几个边界测试用例进行测试. class Solution { public: s ...
- kindeditor文本编辑器乱码中乱码问题解决办法
这个问题我已经解决掉了,不是更改内容的编码格式,只要将lang/zh_CN.js 这个文件的编码转换成unicode即可 操作方法是 用记事本打开这个文件,另存为,然后更改文件的编码格式为unico ...
- 浅析CLR的异常处理模型
文章目录: 异常概述 CLR中的异常处理机制 CLR中异常的核心类System.Exception类 异常处理的设计规范和最佳实践 异常处理的性能问题 其他拓展 1.异常概述 异常我们通常指的是行动成 ...
- 图片全屏轮播插件poposlides
jQuery轻量级全屏自适应焦点图插件poposlides 在线演示本地下载
- 给WordPress的TinyMCE Advanced编辑器加上中文字体
为TinyMCE编辑器增加中文字体并不复杂,只需要将将如下代码加到当前主题的functions.php文件中最后一个?>的前面即可: 不要忘记保存,然后更新一遍浏览器即可 //为TinyMCE编 ...
- okhttp3 ExceptionInInitializerError 异常处理
okhttp3 在Android4.4上出现下面异常 java.lang.ExceptionInInitializerError at okhttp3.OkHttpClient.newSslSocke ...
- Kafka 分布式消息系统详解
实际上kafka对机器的需求与Hadoop的类似. 原来,对于Linkin这样的互联网企业来说,用户和网站上产生的数据有三种: 需要实时响应的交易数据,用户提交一个表单,输入一段内容,这种数据最后是存 ...