DOM性能优化

时间：2024-03-04 13:13:18 点击量：

背景：DOM操作占用CPU比较多，导致浏览器重新渲染，耗时，所以避免频繁的DOM操作

JavaScript DOM操作的效率是很低的，而且不是一般的慢，而且这也是引发性能问题的常见问题之一。为什么会慢呢？因为对DOM的修改为影响网页的用户界面，重绘页面是最昂贵的浏览器操作之一。

在讨论页面重绘、重排之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。

浏览器把获取到的HTML代码解析成一个DOM树，HTML中的每个tag都是DOM树中的节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。
DOM Tree 和样式结构体组合后构建render tree,render tree能识别样式，render tree中每个节点都有自己的样式，而且 render tree不包含隐藏的节点 (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到 render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。
一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。

回流何时发生：
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：

添加或者删除可见的DOM元素；
元素位置改变；
元素尺寸改变——边距、填充、边框、宽度和高度
内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
页面渲染初始化；
浏览器窗口尺寸改变——resize事件发生时； DOM操作带来的页面重绘或重排是不可避免的，但可以遵循一些最佳实践来降低由于重排或重绘带来的影响。

最常见频繁进行DOM操作的是频繁修改DOM元素的样式，代码类似如下：

这种编码方式会因为频繁更改DOM元素的样式，触发页面多次的重排或重绘,建议可以把这些样式放到一个class里面，减少对DOM的操作:

DocumentFragments描述： DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。

这种方式是把页面上的DOM元素克隆一份到内存中，然后再在内存中操作克隆的元素，操作完成后使用此克隆元素替换页面中原来的DOM元素。这样一来，影响性能的操作就只是最后替换元素的这一步操作了，在内存中操作克隆元素不会引起页面上的性能损耗。

把页面中具有动画效果的元素设置为绝对定位，使得元素脱离页面布局流，从而避免了页面频繁的重排，只涉及动画元素自身的重排了。这种做法可以提高动画效果的展示性能。如果把动画元素设置为绝对定位并不符合设计的要求，则可以在动画开始时将其设置为绝对定位，等动画结束后恢复原始的定位设置。在很多的网站中，页面的顶部会有大幅的广告展示，一般会动画展开和折叠显示。如果不做性能的优化，这个效果的性能损耗是很明显的。使用这里提到的优化方案，则可以提高性能。

缓存DOM对象:因为获取DOM的布局信息会有性能的损耗，所以如果存在重复调用，最佳的做法是尽量把这些值缓存在局部变量中。
如上的代码中，会在一个循环中反复取得一个元素的offsetTop值，事实上，在此代码中该元素的offsetTop值并不会变更，所以会存在不必要的性能损耗。优化的方案是在循环外部取得元素的offsetTop值，相比较之前的方案，此方案只是调用了一遍元素的offsetTop值。
因为取得DOM元素的布局信息会强制浏览器刷新渲染树，并且可能会导致页面的重绘或重排，所以在有大批量DOM操作时，应避免获取DOM元素的布局信息，使得浏览器针对大批量DOM操作的优化不被破坏。如果需要这些布局信息，最好是在DOM操作之前就取得。
如果把取得DOM元素的布局信息提前，因为浏览器会优化连续的DOM操作，所以实际上只会有一次的页面重排出现.

【返回列表】