jQuery 动画不流畅

Question

如上所述，我的页面流畅性存在问题，我认为 jquery 在某种程度上涉及其中。

我创建了以下单页网站。

http://cgeese.de/tests/Test02/

我使用 jQuery 和 js 插件

• 本地滚动
• scrollto(均由 Ariel Flesler，http://flesler.blogspot.de/ )
• 宽松(由 GSGD，http://gsgd.co.uk/sandbox/jquery/easing/)

问题

单击链接可将页面滚动到具有弹跳缓动功能的目标 div(由 easing.js 提供)。从技术上来说它工作得很好，但对于我的口味来说还不够流畅。

我认为缓动中的口吃问题是我滥用了这些插件之一，但我似乎无法在代码中找到错误。

问题

为什么动画卡顿？如何使其更流畅？

更新 有什么线索吗？似乎使用 jQuery 内置缓动看起来更好一些，但也有同样的问题。所以我猜不是缓动插件留下了 Ariel Feslers 的东西。有没有类似他的插件？

Answer 1

它在 Chrome 上看起来相当流畅。更改缓动类型不会有太大变化...

您的导航位置:已修复，导致每个导航关键帧的整个页面重新绘制/重排。您可以使用 chrome canary 或以下技巧将其可视化:http://paulirish.com/2011/viewing-chromes-paint-cycle/

动画滚动也会触发重绘。还要尽可能多地删除 CSS3 阴影和渐变，它们很难为浏览器制作动画。

我认为 Firefox 有一个插件。

您可以优化它，将其设置为绝对位置，并将您的内容放置在溢出隐藏的 div 中...(某种假主体)

这是一篇关于它的优秀文章:http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

您可以做的另一件事不是为滚动设置动画，而是为元素本身设置动画，将它们放置在绝对定位的元素中，然后为该元素设置动画。

有关重绘/回流的一些一般准则:https://developers.google.com/speed/articles/reflow