DOM的性能优化

DOM的性能优化

为什么要进行DOM的性能优化？

由于DOM操作自身的效率低下，经常使用DOM必然影响网页的用户界面，还会引起更严重的核心问题：页面的回流和重绘

什么是回流、重绘？

回流：根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
重绘：根据渲染树以及回流得到的几何信息，得到节点的绝对像素

回流和重绘的区别：

1. 回流必将引起重绘，而重绘不一定会引起回流。
   比如：只有颜色改变的时候就只会发生重绘而不会引起回流
2. 当页面布局和几何属性改变时就需要回流
   比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

怎样进行DOM的性能优化？

1. 减少DOM操作的使用（或将多个DOM操作合并到一个）
2. 操作DOM前，先把DOM节点删除或隐藏，因为隐藏的节点不会触发重排
3. 设置具有动画效果的DOM元素的position属性为fixed或absolute
4. 使用事件托管方式绑定事件

https://segmentfault.com/a/1190000017329980
https://blog.csdn.net/m0_38099607/article/details/72961066

问题：怎样进行DOM的性能优化？
知识点：DOM操作的缺点、前端性能优化