非常にシンプルな視差コードにはパフォーマンスの問題があります

Question

視差効果については、ネイティブのJavascriptで簡単なスクリプトを作成しましたが、見えない場所では失敗するようです。だから私はすでに​​の機能を追加したのですが、実際には役に立たないようです。

私の関連するコードは次のとおりです。

var $parallax, vh; 
$(document).ready(function() { 
    $parallax = $('.parallax'); 
    vh = $(window).height(); 

    $parallax.parallaxInit(); 
}); 

$(window).resize(function() { 
    vh = $(window).height(); 

    $parallax.parallaxInit(); 
}); 


$.fn.parallaxInit = function() { 
    var _ = this; 
    _.find('.parallax-bg') 
     .css('height', vh + (vh * .8)); 

} 



//call function on scroll 
$(window).scroll(function() { 
    window.requestAnimationFrame(parallax); 
}); 

var parallaxElements = document.getElementsByClassName('parallax'), 
    parallaxLength = parallaxElements.length; 

var el, scrollTop, elOffset, i; 

function parallax(){ 

    for(i = 0; i < parallaxLength; i++) { 

     el = parallaxElements[i]; 
     elOffset = el.getBoundingClientRect().top; 

     // only change if the element is in viewport - save resources 
     if(elOffset < vh && elOffset + el.offsetHeight > 0) { 

      el.getElementsByClassName('parallax-bg')[0].style.top = -(elOffset * .8) + 'px'; 

     } 

    } 

} 

私はそれは奇妙なことだと思うことは本当に私の知る限り、最適化されていない状態（自分の携帯電話上の）私のスクリプトよりもthis script by Hendry Sadrak実行優れています。

更新：https://jsperf.com/parallax-test

Answer 1

は新しいjQueryのオブジェクトを作成することは、かなり高価なので、理想的にあなたがいる場合、変数に保存したい：getBoundingClientRectはJavascriptのいくつかの変種では遅いかもしれませんが、それは約78％高速だ場合、私がチェックそれらはあなたのスクリプトによって複数回使用されます。 （$(window)を呼び出すたびに新しいjQueryオブジェクトが作成されます）。

var $window = $(window);をスクリプトの先頭に追加し、$(window)を呼び出す代わりにこれを使用すると、もう少し役立ちます。

Answer 2

ここでは、モバイルデバイスでのJSアニメーションのダウンローがあります。それらに頼らないでください。

モバイルデバイスにはバッテリが搭載されており、ソフトウェアはバッテリの負荷を最小限に抑えるように設計されているためです。メーカーが使うトリックのひとつ（Appleはすべてのモバイルデバイスでこれを実行しています）は、スクロール中に一時的にスクリプトの実行を一時停止します。これは視差のようなことをすると特に顕著です。表示されているのはコードの実行です。スクロール、実行の一時停止、スクロールの停止、アニメーションの一時停止とキャッチアップです。しかしそれだけではありません。 iOSはUIスレッドのリアルタイム優先順位付けを使用します。つまり、スクロールはスクロール中に他のすべてのアクションよりも優先され、この遅れが増幅されます。

モバイルデバイスでスムーズなアニメーションが必要な場合は、可能であればCSSアニメーションを使用してください。優先順位付けが異なる方法で処理されるため、影響はAndroidではほとんど見られませんが、一部のラグは目立つように見えます。

レッドよりここに：https://plus.google.com/100838276097451809262/posts/VDkV9XaJRGS

Answer 3

私はそれを修正！代わりにtransform: translate3dを使用しました。これはCPUではなくGPUで動作します。これは、モバイルでさえ、はるかにスムーズになります。

http://codepen.io/AartdenBraber/pen/WpaxZg?editors=0010