jQuery Parallax/Scroll Eventsパフォーマンス

Question

この質問は、イベントをスクロールするよりも視差の程度が低いです。私のプロジェクトで心配しているのは、視差のスクロール効果が滑らかで、不気味ではないということです。

私の質問は、特定のプロパティは、他のものよりも優れたアニメーション/スクロールですか？たとえば、スクロールのマージン・トップを調整するよりも、バックグラウンド・ポジションがうまく機能します。

Answer 1

他のプロパティよりアニメーション化中のオーバーヘッドが少ないプロパティがあるかどうかはわかりませんが、誰かがそのテーマに関するいくつかの良い情報を投稿すると、私は非常に興味があります。それはパフォーマンスを助けることができるいくつかの事柄を知っていると言われています。

設定をに設定すると、ページの通常のフローから要素が削除されるため、アニメーション化されたときにページ全体を再描画する必要はありません。 position : relativeは、祖先要素と子孫要素が影響を受ける可能性があるため、ページ全体の再描画を強制します。

また、あなたがscrollイベントを絞ると、まだ30fpsのを達成することができます

var scroll_ok = true; 
setInterval(function() { 
    scroll_ok = true; 
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance 
$(window).bind('scroll', function() { 
    if (scroll_ok === true) { 
     scroll_ok = false; 
     //now run your code to animate with respect to scroll 
    } 
}); 

UPDATE :: 2014年8月26日

物事はこれが最初に書き込まれてから変更されています。いくつかの簡単なメモ：

• 最近のブラウザは現在、プロパティの特定のセット（私の頭の上からopacityとtransform）与えられた要素の絵を加速GPUにしよう。これらのプロパティを使用すると、top/left（transformを使用するよりも多くの場合にページを再描画する必要があります）などのパフォーマンスが大幅に向上します。

• will-changeは、ブラウザで取り上げられたばかりの新しいプロパティです。基本的に変更可能なプロパティのリストを設定して、ブラウザがプロパティの変更を事前に最適化できるようにすることができます。

• ​​は、堅牢なポリフィルと優れた最新のブラウザサポートを備えています。これは、ブラウザが可能な限りレンダリングするので、大量の「チャンク」を作成せずに、要素をスムーズにアニメーション化するよりはるかに優れた方法です。