编辑“︁CSS性能优化”︁（章节）

=== 2. 减少重排与重绘 ===
通过CSS Triggers（https://csstriggers.com/）了解哪些属性会触发重排/重绘。

<mermaid>
flowchart TD
    A[修改CSS属性] --> B{触发重排?}
    B -->|是| C[重新计算布局]
    B -->|否| D{触发重绘?}
    D -->|是| E[重新绘制]
    D -->|否| F[仅合成]
</mermaid>

'''优化技巧：'''
* 使用<code>transform</code>和<code>opacity</code>实现动画（只触发合成）
* 避免在JavaScript中频繁读取布局属性（如offsetTop）