jQuery：减少重新绘制

我需要优化图像库滑块，因为很多浏览器都很难处理动画。jQuery：减少重新绘制

请考虑下面的例子：

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个MS三合一重绘！

有没有什么办法可以克隆三个div，在离线状态下工作，并且一次性替换所有这些，从而将重新绘制的数量减少到一个？

如果您有其他建议，请拨打随时与我们分享。

谢谢！

来源

2010-09-16 John

Erm ... jQuery自己的'animate（）'有什么问题？ – 2010-09-16 06:03:56

我只需在他们每个上设置动画并让它们运行20 ms？ – John 2010-09-16 06:30:06

我刚刚转换为动画。它仍然是波涛汹涌，所以我不幸的是没有获得任何东西。 – John 2010-09-16 06:38:40

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

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

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

想法3：将所有动画合并到一个计时器中。我想大多数好的框架都会为你处理这个问题。

最终，无论你还是你的框架都会迭代地为每个选择器设置CSS属性，所以我认为你会通过查看别处来实现你的收益。

来源

2010-09-16 06:11:51

为什么要投票？他要求提供其他想法。 – 2010-09-16 06:14:42

谢谢。 Idea1：我可以提高速度，但在大多数浏览器中仍然不稳定。 Idea2：我忘了说divs都是绝对定位的。 Idea3：单个计时器？我不确定我是否遵守。你能详细说明吗？ – John 2010-09-16 06:29:03

下面是MozAfterPaint的输出：http：//pastebin.com/K3N0MZCW当做幻灯片时。 – John 2010-09-16 06:50:03

jQuery：减少重新绘制

回答

相关问题