有关文档碎片(document fragment)的用法
2015-06-10 09:41
459 查看
通常情况下修改、删除或者增加DOM元素。更新DOM会导致浏览器重新绘制屏幕,也会导
致reflow,这样会带来巨大的开销。我们通常解决这的办法尽量减少更新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);
相关文章推荐
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 初级:如何在终端及图形界面中更新 Ubuntu
- 浏览器 cookie 限制
- 玩转浏览器IE7的5个顶级使用技巧
- 字符集导致的浏览器跨站脚本攻击分析
- 更改IE浏览器的图标
- 如何创建ajax对象并兼容多个浏览器
- css ie6 ie7 ff的CSS hack使用技巧
- CSS 浏览器的等宽空格问题解决
- 区分IE6,IE7,firefox的CSS hack
- 必须会的SQL语句(四) 数据删除和更新
- bat+xcopy实现只复制比目标文件更新的文件
- 使用 TOP 子句限制UPDATE 语句更新的数据
- 与MSSQL对比学习MYSQL的心得(八)--插入 更新 删除
- PHP限制页面只能在微信自带浏览器访问的代码
- 多种浏览器清除缓存的方法小结
- Dom与浏览器兼容性说明