如何提高jQuery动画性能?

时间:2012-12-16 18:17:43

标签: javascript jquery performance jquery-animate rendering

我的网站现在几乎都是AJAX,我正在将jQuery动画推向极限。

使用动态分页&除了Chrome和IE9 +之外,jQuery animate在所有浏览器上看起来都很糟糕。

我的猜测是因为Chrome(IE9 +?)是唯一默认启用JS多线程或多线程的浏览器。

是否有可能在JS / HTML / etc等其他浏览器上打开它?

非常感谢提前!

仿形

我的词汇非常糟糕,所以我一开始并不理解这个词。

是的,我一直在寻找更好的方法来改进我的代码。对于克隆等速度而不是附加stringed html,一次选择多个元素等等。

它在Chrome和IE9 +中运行顺畅,其他一切都很差(在默认的Android 2.2和iPhone移动浏览器中最差)。

多线程

我是从here得到的,并且因为它有意义而继续使用它。如果这是错的,请告诉我,我会编辑这个问题是否恰当。

我的动态分页

基本上,append cloned opacity:0 absolute divs通过relative循环向for容器。克隆div中的一些细分也可以克隆,因为我还有更多的子行也通过for循环。我top它到累积高度,每个附加的div增加10px。一旦准备好,我animateopacity:1。如果absolute需要留在那里,那么“top只是动画而没有其他更改。

所有动画500毫秒。所有div都预先格式化了CSS。没有图像。它就像我希望的那样直截了当,它在Chrome和IE9 +中运行得非常好。

1 个答案:

答案 0 :(得分:2)

配置您的代码,也许使用Safari拥有的内置工具来验证动画(或动态分页)是否会导致问题。考虑用纯JavaScript编写一些jQuery动画。我使用jQuery使用的大约10%的代码重新编写了淡入淡出函数,但需要权衡它仅针对现代浏览器。

每个人的表现提升:

http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/