阅读 75

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

前言

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


DOM元素和方法

在操作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从文档流中摘出来(也可以是复制出来),然后对其一顿操作,再把操作后的部分放回去。

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

1、隐藏DOM元素
2、创建一个文档片段(document fragment)
3、将原始的DOM元素拷贝出来,修改后替换原文档
复制代码
关注下面的标签,发现更多相似文章
评论