transition场景下主动触发浏览器的重绘

transition场景下主动触发浏览器的重绘

强制重绘的概念

在分析SortableJS源码时，我们注意到一个有趣的repaint函数实现：

function repaint(target) {
  return target.offsetWidth;
}

这个看似简单的函数实际上触发了浏览器的重要机制——强制重绘（Forced Reflow）。在大多数情况下，我们确实应该尽量减少不必要的重绘以提高性能，但在某些特定场景下，主动触发重绘却是必要的。

强制重绘的必要性

现代浏览器为了优化性能，会将DOM变更操作放入队列中批量处理。这种机制虽然提高了效率，但有时会导致样式变更不能立即生效。

观察以下示例：

function createBox() {
  const box = document.createElement("div");
  box.id = "box";
  box.style.transition = "all 1s";
  box.style.width = "100px";
  box.style.height = "100px";
  box.style.background = "red";
  document.body.appendChild(box);
  return box;
}

// 测试强制重绘的效果
const demo1 = () => {
  const box = createBox();
  
  repaint(box); // 强制重绘
  
  box.style.width = "300px";
  box.style.backgroundColor = "green";
};

const demo2 = () => {
  const box = createBox();
  
  // 不强制重绘
  box.style.width = "300px";
  box.style.backgroundColor = "green";
};

在这个例子中，demo1使用了强制重绘，过渡动画会正常执行；而demo2没有强制重绘，浏览器会在当前JavaScript执行栈结束后才统一处理样式变更，导致过渡效果失效。

强制重绘的工作原理

当读取某些布局属性时，浏览器会执行以下操作：

1. 应用所有排队的样式变更 - 刷新样式队列
2. 重新计算布局 - 触发回流（Reflow）
3. 更新渲染树 - 触发重绘（Repaint）

常用的强制重绘属性包括：

属性/方法	描述
offsetWidth/Height	元素布局宽度/高度
clientWidth/Height	元素可视区域宽度/高度
scrollWidth/Height	元素滚动区域宽度/高度
getComputedStyle()	获取元素最终计算样式

实际应用场景

1. CSS过渡/动画 - 确保样式变更被立即应用
2. DOM测量 - 获取元素最新尺寸/位置
3. 复杂动画序列 - 控制动画执行顺序
4. 布局同步 - 确保后续操作基于最新布局

性能注意事项

虽然强制重绘在某些场景下是必要的，但过度使用会导致性能问题。最佳实践是：

1. 将读取和写入操作分开（读写分离）
2. 批量处理DOM操作
3. 仅在必要时触发强制重绘

理解强制重绘的机制，可以帮助我们更好地控制页面渲染流程，在保证功能实现的同时兼顾性能优化。