重排（Layout Refesh）

• 修改元素的几何属性（如宽度、高度、位置等）会触发重排。这一过程会重新计算布局树，导致整体布局发生变化。重排资源消耗较大，因为涉及布局树、分层树以及文备资源的刷新。

重绘（Repaint）

• 修改元素的绘图属性（如背景颜色、字体样式等）会触发重绘。布局树不会重建，只有绘图树会被刷新。这一过程效率高于重排，但仍旧占用主线程资源。

合成（Composite）

• 对于不需要布局和绘制改变的属性修改，浏览器会直接进入合成阶段，只处理后续复合操作。这种优化能够大幅提升性能，尤其是在使用CSS transform进行非主线操作时。

使用CSS类操作样式

• 将样式集中管理，避免频繁修改内联样式，减少重绘的触发次数。

避免使用表格布局

• 表格及其内元素在布局时需要多次计算，增加了重排开销。

批量操作DOM

• 利用createDocumentFragment或框架如React，减少重排次数，只更新改变的节点。

Debounce窗口尺寸变化

• 在动画或响应式设计中，防止频繁触发重排，减少资源浪费。

读写分离

• 确保设置样式和属性值分开执行，以减少重排触发次数。

使用will-change: transform

• 开启硬件加速，提升重绘效率，适合复杂动画的情况。

使用绝对或固定定位

• 脱离文档流，减少布局计算，降低重排代价。

使用display: none而非visibility

• 避免触发布局或重绘，减少不必要的计算。