DOM编程中，提高程序运行速度需要注意的一些点

最新推荐文章于 2024-09-20 15:35:45 发布

weixin_33766805

最新推荐文章于 2024-09-20 15:35:45 发布

阅读量87

点赞数

文章标签：数据结构与算法 javascript ViewUI

原文链接：https://juejin.im/post/5cffb928e51d4510617210a4

版权

因为浏览器中通常会将DOM和javascript独立实现，两个相互独立的功能需要通过接口彼此链接，就会产生新能上的消耗。访问DOM就会产生消耗，修改DOM的影响更大。因此，减少对DOM的操作，把运算多留在ECMAScript中处理是理想的选择。

在操作DOM元素的方法中，有返回html集合的方法，也有返回Nodelist（一个对元素的引用列表）的方法。

返回html集合的方法（html集合与文档保持连接，文档更新，集合就会随之更新，因此使用html进行一些遍历操作或者别的操作，会非常低效）：

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()
复制代码

返回Nodelist的方法（包含返回节点的类数组对象）：

document.querySelectorAll('css selector')
document.querySelector('css selector')
复制代码

浏览器在下载完页面中的资源后（JS,CSS,HTML,图片），会解析生成两个内部的数据结构——DOM树（表示页面结构）和渲染树（表示DOM节点如何显示）。

当修改DOM的几何属性之后，浏览器会使渲染树中受到改变和影响的部分失效，重新构造对应的渲染树，这个过程称作“重排”。完成重拍后，浏览器将重新绘制受影响的部分到屏幕中，这个过程称为“重绘”。

何时会发生重排：

1、添加、删除可见的DOM元素
2、改变DOM元素的大小，边距等。
3、改变DOM元素的位置。
4、DOM元素的内容发生改变，文本或者图片等。
5、页面渲染初始化和浏览器窗口的改变。
复制代码

由于每次重排都会产生性能消耗，浏览器会通过队列化批量执行的方式来优化重排过程。但是，在一些对DOM的操作中，会无意间刷新队列立即执行重排：

1、offsetTop。。。
2、scrollTop。。。
3、clientTop。。。
4、getComputedStyle()
复制代码

以上操作需要获取实时的布局信息，因此不等不让浏览器强制刷新队列以返回正确值。

基本思路是，将需要批量修改的DOM从文档流中摘出来（也可以是复制出来），然后对其一顿操作，再把操作后的部分放回去。

有集中方法可以使DOM脱离文档流：

1、隐藏DOM元素
2、创建一个文档片段（document fragment）
3、将原始的DOM元素拷贝出来，修改后替换原文档
复制代码

转载于:https://juejin.im/post/5cffb928e51d4510617210a4

关注