哪个更适合在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');

• 专业版：“只是在浏览器中工作”
• Con：这是一个黑客

选项2：requestAnimationFrame

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

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

• 亲：没有黑客
• Con：Browser support（IE版本低于9？）

Answer 1

我发现两个解决方案都不完美，因为IE9（以及更旧版本）不支持requestAnimationFrame，而且clientLeft hack是..好吧，这是一个黑客攻击。

所以，我使用Paul Irish's polyfill for requestAnimationFrame，现在我拥有两全其美：

• 我可以使用setTimeout()
替换我的大部分requestAnimationFrame()来电
• 支持它的较新浏览器本身提供requestAnimationFrame
• 较旧的浏览器获取polyfill

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