jQuery Animation nicht flüssig

Question

wie gesagt, ich habe ein Problem mit der Flüssigkeit meiner Seite und ich denke, Jquery ist in irgendeiner Weise beteiligt.

Ich habe die folgende One-Page-Site erstellt.

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

Ich benutze jQuery mit dem js Plugins

• localscroll
• scrollTo (beide von Ariel Flesler, http://flesler.blogspot.de/)
• Lockerung (von GSGD, http://gsgd.co.uk/sandbox/jquery/easing/)

Problem

Durch Klicken auf einen Link wird die Seite mit einer Bounce-Leichtigkeit zum Ziel-Div (die von easing.js bereitgestellt wird) gescrollt. Es funktioniert technisch gut, aber es ist nicht glatt genug für meinen Geschmack.

Ich denke, das Problem mit dem Stottern in der Lockerung ist, dass ich eines dieser Plugins missbrauche, aber ich kann nicht scheinen, einen Fehler im Code zu finden.

Fragen

WARUM die Animation Stottern ist und wie kann ich sie glatter zu machen?

Aktualisieren Irgendwelche Hinweise überhaupt? Scheint so, als würde die Verwendung der jQuery-build-in-Beschleunigung etwas besser aussehen, hat aber das gleiche Problem. Ich denke, es ist nicht das Easing-Plugin, das Ariel Feslers stört. Gibt es ein Plugin wie dieses?

Answer 1

Es scheint ziemlich flüssig auf Chrom. Das Ändern der Beschleunigungsart ändert nicht viel ...

Ihre Navigation ist Position: behoben, was ein Repaint/Reflow der gesamten Seite für jeden Navigationsschlüsselrahmen verursacht. Sie können dies mit Chrom Kanarienvogel oder mit diesem Trick visualisieren: http://paulirish.com/2011/viewing-chromes-paint-cycle/

Animieren der Rolle löst auch ein Repaint. Entfernen Sie auch so viele CSS3 Schatten und Farbverläufe, wie Sie können, sie sind ziemlich schwer für den Browser zu animieren.

Ich denke, es gibt ein Plugin für Firefox zu.

Sie könnten diese meine optimieren Einstellung es position: absolute, und Ihre Inhalte innerhalb eines div platzieren, die Überlauf versteckt ... (eine Art von gefälschten Körper)

Hier ist ein ausgezeichneter Artikel über sie: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

Die andere Sache, die Sie tun könnten, ist nicht die Rolle, sondern die Elemente selbst zu animieren, sie in ein absolut positioniertes Element zu platzieren und dieses Element zu animieren.

Einige allgemeine Richtlinien über repaints/Rückfluesse: https://developers.google.com/speed/articles/reflow