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毫秒需要三次重绘！

有没有办法克隆这三个div，离线处理它们并立即替换所有它们，从而减少重绘量为一个？

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

谢谢！

Answer 1

有几种方法可以使这个过程更具资源效率。

创意1：20ms达到50 FPS。你的普通好莱坞电影以24-30 FPS运行（我忘记了确切的帧速率）。尝试间隔33 - 40ms。

理念2：尽可能使用绝对定位，以尽量减少文档其余部分所需的回流量。

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

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