【问题标题】:How to Improve jQuery animation performance? [closed]如何提高 jQuery 动画性能? [关闭]
【发布时间】:2012-12-03 23:01:35
【问题描述】:

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

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

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

是否可以在其他浏览器的 JS/HTML/etc 中开启它?

非常感谢!

分析

众所周知,我的词汇量很差,所以一开始我不明白这个词。

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

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

多线程

我是从here 那里得到它的,因为它是有道理的。如果有错误,请告诉我,我将编辑问题以确保适当性。

我的动态分页

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

所有动画 500 毫秒。所有用 CSS 预格式​​化的 div。没有图像。它就像我希望的那样简单,并且在 Chrome 和 IE9+ 中运行良好。

【问题讨论】:

  • 你做过代码分析吗?
  • 你所说的多线程到底是什么意思,你是在谈论 webworkers,如果不是,javascript 多线程到底是怎样的,你有什么可以支持的,因为我很好奇如何基于事件语言处理多线程?
  • 你能发布一些你认为变慢的代码吗?
  • Nit:ECMAScript 没有定义线程。在这里使用 MT 的假设是错误的,因为它不是。现在,不同的 ECMAScript/DOM/Rendering 实现的行为不同,但这与“JS 多线程”(在此上下文中不存在)无关。
  • @pst 所以这是一个渲染问题?我应该编辑以反映这一点吗?如果您认为这就是不同表演的原因,您介意将其作为答案吗?谢谢!

标签: javascript jquery performance jquery-animate rendering


【解决方案1】:

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

每个 Joe 的性能提升:

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

【讨论】:

  • 我在顶部添加了原始链接。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多