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

DOM是什么？

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。在浏览器中主要用于与HTML文档打交道，并且使用DOM API用来访问文档中的数据。

DOM的作用

• DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
• 它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

优点和缺点

• DOM的优势主要在于易用性强，使用DOM时，将把所有的XML文档信息都存在于内存中，并且遍历简单，支持XPath，增强了易用性。
• DOM的缺点主要表现在效率低，内存占用量过高，对于大文件来说几乎不可能。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将文档的每个Element，Attribute，Processing-instruction和Comment都创建了一个对象，这样在DOM机制中运用了大量对象的创建和销毁无疑影响其效率。

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

        用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

• 在浏览器中DOM的实现和ECMAScript是分离的。
• ES和DOM是两种东西，每次连接都需要消耗性能
• 操作DOM会导致重排和重绘，重排会占用、消耗CPU; 重绘会占用、消耗GPU