css 重排和重绘的区别，和触发条件，避免方法

重排（reflow）是指浏览器重新计算元素的几何属性，例如位置、尺寸和盒模型等，并将其放置在页面中的正确位置的过程。重排会影响页面的布局，导致页面内容发生变化。

重排的触发条件包括：

• 添加、删除或修改 DOM 元素
• 改变元素的几何属性，例如位置、尺寸和盒模型等
• 改变元素的布局属性，例如浮动、定位和 flexbox 等
• 改变窗口大小或滚动条位置
• 获取一些特定属性也会触发
  • offsetTop、offsetLeft 等

避免重排的方法包括：

• 尽量避免在频繁操作 DOM 元素
• 使用 CSS 动画或过渡来代替直接改变元素的属性
• 使用 position: absolute 或 position: fixed 来定位元素
• 使用 flexbox 或 grid 布局来代替浮动布局

重绘（repaint）是指浏览器重新绘制元素的外观，例如颜色、背景和边框等，而不会改变元素的布局。重绘只会影响页面的外观，不会改变页面内容。

重绘的触发条件包括：

• 改变元素的外观属性，例如颜色、背景和边框等
• 改变元素的可见性
• 改变元素的字体【注意字体重绘】
• 改变元素的内容

避免重绘的方法包括：

• 尽量避免频繁改变元素的外观属性
• 使用 CSS 层叠上下文 (layering context) 来隔离元素
• 使用 will-change 属性来提示浏览器即将发生变化
• 使用 GPU 加速来提高渲染速度