深入理解重排（Reflow）与重绘（Repaint），写出高性能 CSS 动画

在前端开发中，CSS 动画是提升用户体验的重要手段，但很多开发者在使用动画时并不了解浏览器背后的渲染机制，导致动画卡顿甚至影响整体性能。本文将带你深入理解 CSS 中的两大核心概念 —— 重排（Reflow） 与 重绘（Repaint），并掌握如何编写高性能的 CSS 动画。

一、什么是 Reflow（重排）？

重排是指浏览器在渲染过程中，重新计算元素的几何结构（位置、大小、盒模型）的过程。

会触发 Reflow 的典型操作：

• 修改几何类属性：width、height、margin、padding、border
• 位置属性：top、left、bottom、right
• 布局属性：display、position、overflow
• DOM 操作：添加、删除、修改节点
• 读取某些属性（如 offsetTop, scrollHeight 等）会强制触发 reflow

⚠️ 重排是浏览器渲染中最昂贵的操作之一，可能导致整个页面重新计算布局，开销巨大。

二、什么是 Repaint（重绘）？