为什么说js操作DOM很慢

为什么说js操作DOM会影响性能呢？

在浏览器中DOM得实现和ECMAScript是分离得。

在IE中EMCMAScript是实现在jscript.dll中，DOM实现在mshtml.dll中。在Chrome中使用Webkit中的WebCore处理DOM和渲染，ECMAScript是在V8引擎中实现的。其他浏览器也类似。

因此在使用js操作DOM的时候是通过js代码调用DOM的接口，这就相当于两个互相独立的模块发生交互，这样的性能损耗是非常高的。

然后影响DOM操作性能的主要原因是它会导致浏览器重绘和重排。

浏览器渲染的原理

我以前写过：站在浏览器角度谈前端优化

简单理解为浏览器解析html形成DOM树，解析css形成CSSOM树，然后他两合并成渲染树。然后根据Layout布局映射到屏幕上。当页面发生重绘或者重排的话，浏览器会重新计算，消耗很多的性能，

重绘

页面某些部分需要重新绘制，由于节点的几何属性发生改变或者由于样式发生变化。例如改变元素的背景，屏幕上的部分内容发生改变需要更新，发生重绘。发生重绘元素的位置和尺寸都不会变，

重排

元素的位置或者尺寸发生改变。浏览器会重新计算渲染树。因为位置和尺寸更改势必会影响整体的布局，这样损耗的性能比较高。分为部分重排和全部重排，应该避免全部重排。重排比会重绘。

原文地址：https://www.cnblogs.com/yaobai/p/10087014.html