jQuery动画不流畅

Question

如上所述，我的页面流动性有问题，我认为jquery有一定的参与性。

我创建了以下一页式网站。

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

使用jQuery与JS插件

• localscroll
• scrollto（包括阿里尔Flesler，http://flesler.blogspot.de/）
• 宽松政策（由GSGD，http://gsgd.co.uk/sandbox/jquery/easing/）

问题

单击一个链接将页面滚动到具有反弹缓冲区的目标div（由easing.js提供）。它技术上工作正常，但对我的口味来说不够流畅。

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

问题

为什么动画口吃以及如何我能让它更顺畅？

更新 任何线索？似乎使用jQuery内置缓动看起来好一点，但也有同样的问题。所以我想这不是缓解插件，这留下了Ariel Feslers的东西。有没有像他的插件？

Answer 1

它在铬上显得很流畅。更改缓动类型不会有太大变化...

您的导航是位置：固定，是什么导致整个页面重新绘制/重排每个导航关键帧。你可以用铬金丝雀或这个把戏来想象这个：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