css怎么进行重排和重绘

重排（reflow）

重新排列也可以称为 回流

当呈现树中的一些或全部元素的大小、结构或属性改变时，调用浏览器呈现部分或全部文档的过程。 重排 。

以下操作会导致重新排列：

• 页面的第一次呈现
• 浏览器的窗口大小会更改。
• 元素的内容会发生更改
• 元素的大小或位置会发生变化。
• 元素的字体大小会更改。
• 激活CSS伪类
• 查询某些属性或调用某些方法
• 添加或删除可见DOM元素

在触发重排时，由于浏览器呈现的页面是基于流媒体的布局，当触发重排时，会造成周边DOM元素被重新排列，有两种影响：

• 全局范围：从根节点开始重新布局整个渲染树。
• 局部作用域：重新布局呈现树的一部分或呈现对象

重绘（repaint）

当页面中某些元素的样式更改但不影响它们在文档流中的位置时，浏览器会重新绘制这些元素。这个过程是 重绘 。

以下操作会导致回流：

• color、background 相关属性：background-color、background-image 等
• outline 相关属性：outline-color、outline-width 、text-decoration
• border-radius、visibility、box-shadow

注意 ： 当触发回流时，必须触发重绘，但重绘不一定会触发回流。
这由浏览器呈现顺序决定。

优化思路

• 可以在不重新排列的情况下尽可能多地重绘
• 最大限度地减少重新排列
• 可以小区域重排不是大区域重排
• 避免无效的重新安排

如何避免重排和重绘

减少重排和重划的措施：

• 操作DOM试着在更低的水平上。DOM要操作的节点
• 不要使用table布局， 一个小小的改变可能会让整个table重新安排
• 避免使用CSS表达式
• 不要频繁地操纵元素的样式。对于静态页面，您可以修改类名而不是样式。
• 使用absolute或者fixed，因此元素不在文档流中，因此它们可以在不影响其他元素的情况下更改。
• 避免频繁操作DOM，您可以创建文档片段。documentFragment，在它上
• 应用所有DOM操作，最后将其添加到文档中。
• 先设置元素display: none，操作完成后，会显示出来。因为在display属性为none的元素DOM该操作不会触发回流和重绘。
• 将DOM多个读操作(或写操作)放在一起，而不是穿插在写操作中的读和写操作。这是由于浏览器的呈现队列机制造成的。

渲染队列

该浏览器已经针对页面回流和重绘优化了自己的渲染队列。

浏览器会将所有重排和重绘操作放入一个队列中。当队列中的操作达到一定数量或一定时间间隔时，浏览器会对队列进行批量处理。这将使多个回流和重拉成一个回流重拉。

如何优化动画

对于如何优化动画，我们知道，一般来说，动画需要频繁的操作。DOM，会导致页面性能出现问题，我们可以动漫position属性已设置absolute或者fixed，将动画与文档流分开，这样他的回流就不会影响页面。

参考文档

「2021《高频前端面试问题总结》对前端性能进行了优化。