如何提高jQuery动画性能?

3

我的网站现在基本上都是AJAX,我正在极限推动jQuery动画。

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

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

是否可能在其他浏览器中通过JS / HTML等甚至打开它?

非常感谢!

分析

我以前词汇量很差,所以一开始不理解这个术语。

是的,我不断寻找改进代码的更好方法。例如,为了速度而不是附加字符串html,一次选择多个元素等。

在Chrome和IE9+中运行得非常顺畅,在其他所有浏览器中运行得非常差(默认的Android 2.2和iPhone移动浏览器最糟糕)。

多线程

我从这里得到了它,并且认为它很有道理。如果错了,请告诉我,我将编辑问题以适当处理。

我的动态分页

基本上,我通过一个 for 循环将 opacity:0absolutedivs 通过 appendclone 添加到一个 relative 容器中。由于一些克隆的 div 中可能还有更多的子行,因此我使用另一个 for 循环进行了额外的克隆。我将其 top 到一个累积高度,每个添加的 div 增加 10px。准备好后,我使用 animate 动画到 opacity:1。如果一个 absolute 需要停留在那里,它的 top 就只是简单地进行动画处理而没有其他变化。

所有的动画都是 500ms。所有的 div 都预先用 CSS 格式化。没有图片。这是我所能希望的最直接的方式,它在 Chrome 和 IE9+ 中运行得非常完美。


1
你做过任何代码分析吗? - charlietfl
1
你所说的多线程是指Web Workers吗?如果不是,那么JavaScript如何实现多线程呢?你有什么支持材料吗?我很好奇基于事件的语言如何处理多线程。 - adeneo
你能否发布一些你认为会拖慢程序进程的代码? - Amitd
Nit: ECMAScript没有定义线程。假设在这里使用MT是错误的,因为它并没有被使用。现在,不同的ECMAScript/DOM/渲染实现有所不同,但这与"JS多线程"无关(在这种情况下不存在)。 - user166390
@pst 所以这是一个渲染问题?我应该编辑以反映这一点吗?如果您认为这是不同性能的原因,您介意将其作为答案吗?谢谢! - user1382306
控制台中的性能分析并不是您在定义中描述的。可以在Firebug网站上进一步研究它。 - charlietfl
1个回答

2

1
我在顶部添加了原始链接。 - user1637281

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接