最小化重绘和重排之批量修改DOM
来源:互联网 发布:绿豆网络加速器 编辑:程序博客网 时间:2024/06/13 06:22
批量修改DOM的出发点是减少重绘和重排次数,基本思路是当需要对DOM进行多种修改操作时,首先让DOM脱离文档流;然后让其进行批量修改,修改的过程不会触发浏览器重排和重绘;最后将修改后的DOM重新加入文档中。这样只会在DOM脱离和重新加入文档流时触发重排和重绘操作两次,对于批量修改这样的操作有效降低重排和重绘次数。
DOM脱离文档流的方法
- 改变DOM元素的可见性:前边的博客已经提到隐藏的DOM节点不会出现在渲染树。因此可以先将需要修改的元素的display属性设为“none”,进行修改后再将其改为“block”等可见属性值。
- 使用cloneNode()方法:cloneNode()可以实现DOM的深拷贝(参数设置为true);因此可以将需要修改的DOM节点先进行深拷贝,对深拷贝的备份进行修改,然后用其替换原DOM节点即可。
- 利用DocumentFragment对象:DocumentFragment对象不包含在真实的文档流之中,因此对其修改不会触发热reflow和repaint。DocumentFragment对象是一个无父节点的最小化文档对象,是一个轻量级的存储一段包含多个节点的文档结构。当将该对象插入DOM树时,其通常会将其子孙节点一并插入。可以使用createDocumentFragment创建该对象,然后使用appendChild等方法插入到DOM树。
代码示例
//方法一: 隐藏并修改后显示var ele = document.getElementById('mylist');ele.style.display = "none";appendDataToElement(ele, data);ele.style.display = "block";//方法二:clonevar old = document.getElementById('mylist');var clone = old.cloneNode(true);appendDataToElement(clone, data);old.parentNode.replaceChild(clone, old);//方法三var fragment = document.createDocumentFragment();appendDataToElement(fragment, data);document.getElementById('mylist').appendChild(fragment);
References
- MDN-createDocumentFragement
- MDN-DocumentFragement Object
- 高性能JavaScript(2015年8月第一版)
阅读全文
0 0
- 最小化重绘和重排之批量修改DOM
- 最小化重绘和重排之缓存布局信息
- js性能-DOM编程之重绘和重排
- javascript性能提升——最小化重绘和重排
- 重绘和重排
- 高性能 DOM & 重排重绘
- 浏览器重排和重绘
- 页面渲染之重排reflow和重绘repaint
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘。
- 浏览器的重排和重绘
- 重绘和回流(重排)
- 浏览器的重绘和重排
- 什么是浏览器的重排(reflow)和重绘 (repaint)?如何减少重排和重绘?
- 重绘与重排
- 高性能JavaScript之重绘与重排
- 数组操作--增、删、改、查
- IO流
- 51Nod--1019 逆序数
- Activity的生命周期
- vue集成百度UEditor富文本编辑器
- 最小化重绘和重排之批量修改DOM
- IDEA中的Spring Boot热加载
- ZOJ 1610Count the Colors
- [BZOJ 1041] 圆上的整点
- C++的const类成员函数
- JQ常用
- Java正则表达式
- 异步校验用户名是否存在
- Excel VBA高效办公应用-第八章-商品销售决策与分析-Part3 (商品进货量决策)