jQuery：减少重绘

Question

我需要优化图片库滑块，因为很多浏览器都很难处理动画。

请考虑以下示例：

var $div1 = $('#div1'),
$div2 = $('#div2'),
$div3 = $('#div3'),
left = 0;

function animate() {
  left -= 10;
  $div1.css({
    left: left + 'px',
    width: 1000 - left + 'px'
  });
  $div2.css( 'left', left - 10 + 'px' );
  $div3.css( 'left', left - 40 + 'px' );
}

setInterval( animate, 20 );

当然，这给很多浏览器带来了巨大的压力，它需要每 20 毫秒重绘 3 次！

有什么方法可以克隆三个 div，离线处理它们，然后它们一次替换所有它们，从而将重绘数量减少到一个？

如果您有其他建议，请随时分享。

谢谢！

Answer 1

有几种方法可以让这个过程更加节省资源。

想法 1：20 毫秒可以达到 50 FPS。您的好莱坞电影平均以 24-30 FPS 的速度运行（我忘记了确切的帧速率）。尝试 33 - 40 毫秒的间隔。

想法 2：尽可能使用绝对定位，以尽量减少文档其余部分所需的重排量。

想法 3：将所有动画整合到一个计时器中。我想大多数优秀的框架都会为你解决这个问题。

最终，您或您的框架将为每个选择器迭代设置 CSS 属性，所以我认为您将通过寻找其他地方来实现您的收益。