HTML&&CSS基础知识要点

什么是重绘，什么是回流?如何减少回流?

重绘(Repaint):
重绘是指当元素样式发生改变，但不影响其布局的情况下，浏览器重新绘制元素的过程。例如，修改元素的背景颜色、字体颜色等。
回流(Reflow):
回流是指当元素的布局属性发生改变，需要重新计算元素在页面中的布局位置时，浏览器重新进行布局的过程。例如，修改元素的宽度、高度、位置等。
回流的成本比重绘高得多，因为它涉及重新计算元素的几何属性和页面布局。而重绘只需要重新绘制已计算好的元素样式。
如何减少:
**使用 CSS 动画代替 JavaScript 动画:**CSS 动画利用 GPU 加速，在性能方面通常比 JavaScript 动画更高。效。使用 CSS的 transform 和 opacity 属性来创建动画效果，而不是改变元素的布局属性，如宽度高度等。
**使用 translate3d 开启硬件加速:**将元素的位移属性设置为 translate3d(0，0，0)，可以强制使用GPU 加速。这有助于避免回流，并提高动画的流畅度。
**避免频繁操作影响布局的样式属性:**当需要对元素进行多次样式修改时，可以考虑将这些修改合并为一次操作。通过添加/移除 CSS 类来一次性改变多个样式属性，而不是逐个修改。
**使用 requestAnimationFrame:**通过使用 requestAnimationFrame 方法调度动画帧，可以确保动画在浏览器的重绘周期内执行，从而避免不必要的回流。这种方式可确保动画在最佳时间点进行渲染。
**使用文档片段(Document Fragment):**当需要向 DOM 中插入大量新元素时，可以先将这些元素添加到文档片段中，然后再将整个文档片段一次性插入到 DOM 中。这样做可以减少回流次数。(虚拟 dom vue 的方式)
**让元素脱离文档流:**position:absolute/position:fixed /float:left，(只是减少回流，不是避免回流。

​ 使用 visibility:hidden 替代 display:none: visibility:hidden 不会触发回流，因为元素。仍然占据空间，只是不可见。而使用 display:none 则会将元素从渲染树中移除，引起回流。