javascript - 哪个更好地触发 JavaScript 中的重新布局 - clientLeft hack 或 requestAnimationFrame？

Question

有时，当通过 JavaScript 应用样式时，这些更改是不可见的，因为它们发生在一个动画帧内。

---

示例:

$('.foo').style('color', 'red');
$('.foo').style('color', 'blue');

(请记住，此示例仅用于此问题的演示目的，而不是真实示例。)

---

在上面的示例中，颜色将立即变为蓝色，而红色永远不可见。有些人使用 setTimeout 来解决这个问题:

$('.foo').style('color', 'red');

setTimeout(function () {
  $('.foo').style('color', 'blue');
}, 1);

由于这不是一个好的做法，我想知道在下一帧中强制绘制样式更改哪个更好？

---

选项 1:clientLeft hack

请求 DOM 元素的 clientLeft 值将导致浏览器重新布局。

$('.foo').style('color', 'red');
var bar = $('.foo')[0].clientLeft; // hack to force relayout
$('.foo').style('color', 'blue');

• 专业:跨浏览器“正常工作”
• 缺点:这是一个 hack

---

方案二:requestAnimationFrame

$('.foo').style('color', 'red');

requestAnimationFrame(function () {
  $('.foo').style('color', 'blue');
});

• 优点:没有黑客
• 缺点:Browser support (没有低于 9 的 IE 版本？)

Answer 1

我发现这两种解决方案都不完美，因为 IE9(及更早版本)不支持 requestAnimationFrame 并且 clientLeft hack 是......好吧，这是一个 hack。

所以，我使用了Paul Irish's polyfill for requestAnimationFrame现在我两全其美:

• 我可以用 requestAnimationFrame() 替换我的大部分 setTimeout() 调用
• 支持它的较新浏览器原生提供requestAnimationFrame
• 旧版浏览器获取 polyfill

对我来说是完美的解决方案。