javascript/coffeescriptでの視差スクロールの最適化

Question

私たちは視差をスクロールしています。
1つの線形関数に従って異なるペースでスクロールする、各面に4つのレイヤーがあれば十分です。

しかし、複数のタブが開いている場合は、それが円滑ではありません。
視差画像のスクロールと更新、およびフレームレートの低下がわずかに遅れます。

フレームレートは、小さな画面上ではるかに優れています（私は27" の画面上で開発しています）が、私はすべての画面上で最高のパフォーマンスを取得したいのですが。

ここでは、セットアップにコードをスクロールしています：

win = $(window) 
footerHeight = $('footer').height() 
win.scroll -> 
    scroll = win.scrollTop() 
    baseTop = 183 - scroll - 6*scroll/footerHeight 
    for layer in [0..7] 
    el = parallaxLayers[layer].element 
    top = parseInt(baseTop - scroll * (10 + layer % 4 * 30)/footerHeight) 
    left = parallaxLayers[layer].left 
    el.style.backgroundPosition = "#{left}px #{top}px" 

これはCoffeeScriptのですが、私はそれが最もJS-開発者のために理解することは十分に簡単です願っています私はすでにやる

もの：。

• すべての要素を関数内で即座にアクセスできるようにプリフェッチします。
• background-position-xをプリフェッチするので、各繰り返しをフェッチする必要はありません。
• オーバーヘッドが増えるため、スタイルを設定するためにjQueryを使用しないでください。
• は、彼らは、ジッタないと私はのリフローを引き起こさないように、私は、バックグラウンドの位置を変更することを確認して各層が静的に配置されている

（したがってbaseTop）可能な限り数回、すべてを計算しますページ。

これ以上のことはありますか？

---

パフォーマンスが画面サイズに比例するので、これはJS問題よりもレンダリングの問題だと思います。おそらく、CSS3が役に立つかもしれませんか？

Answer 1

代わりにキャンバスを使用しました。これにより、より滑らかな感触が得られます。