jQuery анимация не текучая

Question

как указано, у меня проблема с текучестью моей страницы, и я думаю, что jquery каким-то образом задействован.

Я создал следующий одностраничный сайт.

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

Я использую JQuery с плагинов JS

• localscroll
• scrollto (как по Ariel Flesler, http://flesler.blogspot.de/)
• ослабление (по GSGD, http://gsgd.co.uk/sandbox/jquery/easing/)

Задача

Щелчок по ссылке прокручивает страницу до целевого div с легкостью отскока (предоставляется easing.js). Это технически прекрасно работает, но для меня это не достаточно гладко.

Я думаю, что проблема с заиканием в ослаблении - это неправильное использование одного из этих плагинов, но я не могу найти ошибку в коде.

Вопросы

ПОЧЕМУ анимация заикание и как я могу сделать ее более гладкой?

Обновление Любые подсказки вообще? Похоже, что использование jQuery-build-in easing выглядит немного лучше, но имеет ту же проблему. Поэтому я предполагаю, что это не плагин-плагин, который оставляет вещи Ариэля Феслерса. Есть ли такой плагин, как он?

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