有关文档碎片(document fragment)的使用方法
2017-06-27 18:48
309 查看
通常情况下改动、删除或者添加DOM元素。
更新DOM会导致浏览器又一次绘制屏幕,也会导
致reflow,这样会带来巨大的开销。我们通常解决这的办法尽量降低更新DOM。这也就意
味着将DOM的改变分批处理。并在“活动”文档树之外运行这些更新。
当须要创建一个相对照较大的子树。应该在子树全然创建之后再将子树加入到DOM树中。
这时採用文档碎片技术来容纳全部的节点。
//反样例
//在创建时马上加入节点
创建文档碎片来离线升级节点信息是更好的做法。当将文档碎片加入到DOM树时,并非
将碎片加入到DOM树中,而是将文档碎片的内容加入进DOM树中。
文档碎片是一种非常好的
方法,能够用来封装很多节点信息,甚至这些节点并没有合适的父节点。
例如以下演示样例:
在上面样例中,活动的文档只更新了一次并触发一次屏幕重绘。而第一个样例中,每
运行一个段落都会重绘一次。
在为DOM树加入新节点时文档碎片是非常实用的。但在更新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);
相关文章推荐
- 简单了解文档碎片DocumentFragment的使用
- 有关文档碎片(document fragment)的用法
- 使用sp_xml_preparedocument处理XML文档的方法
- document.createDocumentFragment(文档碎片)
- JS性能优化之文档碎片-document.createDocumentFragment
- JavaScript中的文档碎片DocumentFragment
- 使用sp_xml_preparedocument处理XML文档的方法
- 存储过程使用sp_xml_preparedocument处理XML文档的方法
- “您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。”
- 使用createDocumentFragment()方法---减少回流,提高性能
- JS性能优化之创建文档碎片(document.createDocumentFragment)
- jquery源码解析(第2章之文档碎片DocumentFragment)
- JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
- JavaScript性能优化--创建文档碎片createDocumentFragment(转)
- js DocumentFragment 文档碎片
- createDocumentFragment创建文档碎片节点
- 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。
- JS性能优化之创建文档碎片(document.createDocumentFragment)
- createDocumentFragment() 创建文档碎片节点
- 创建文档碎片节点createDocumentFragment()并显示