遅いスクロールjQueryなしで切り替えますか？

Question

jQueryを使用せずに以下のことが可能ですか？私はjQueryで動作させていますが、パフォーマンス上の問題があるようです。もしあなたが私が最も感謝することを助けることができれば。私は怠け者ではなく、あまり知られていないコードです。これまでにも私を受け入れてくれました。

// 
    // default speed ist the lowest valid scroll speed. 
    // 
    var default_speed = 1; 
    // 
    // speed increments defines the increase/decrease of the acceleration 
    // between current scroll speed and data-scroll-speed 
    // 
    var speed_increment = 0.01; 
    // 
    // maximum scroll speed of the elements 
    // 
    var data_scroll_speed_a = 2; // #sloganenglish 
    var data_scroll_speed_b = 5; // #image-ul 
    // 
    // 
    // 
    var increase_speed, decrease_speed, target_speed, current_speed, speed_increments; 
    $(document).ready(function() { 
     $(window).on('load resize scroll', function() { 
      var WindowScrollTop = $(this).scrollTop(), 
       Div_one_top = $('#image-ul').offset().top, 
       Div_one_height = $('#image-ul').outerHeight(true), 
       Window_height = $(this).outerHeight(true); 
      if (WindowScrollTop + Window_height >= (Div_one_top + Div_one_height)) { 
       $('#sloganenglish').attr('data-scroll-speed', data_scroll_speed_a).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_a * speed_increment); 
       $('#image-ul').attr('data-scroll-speed', data_scroll_speed_b).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_b * speed_increment); 
       increase_speed = true; 
       decrease_speed = false; 
      } else { 
       $('#sloganenglish').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed); 
       $('#image-ul').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed); 
       decrease_speed = true; 
       increase_speed = false; 
      } 
     }).scroll(); 
    }); 

Answer 1

コードにパフォーマンスの問題はありませんが、最適化のためのスペースがあります。そして、私はjQueryが問題であるとは思わない。

最初に気がつくのはCSSアクセスです。 height属性は、アクセスするには非常に高価です。これは、ブラウザがパイプラインの多くのレンダリングステップを処理するためです（CSS Triggers）。

スクロールイベントで2つの要素の高さを取得しています。つまり、何度も計算されます。本当に必要ですか？

#image-ul要素の高さが変更されていない場合は、イベント外で1回だけ計算できます。

ウィンドウの高さの場合、スクロールイベントでは変更されません。ウィンドウの高さを（再）計算する必要があるイベントとその計算を必要としないイベントのためのハンドラを作成するのはどうでしょうか？

もう1つ注目すべき点は、 'data-current-scroll-speed'属性と 'data-speed-increments'属性を常に同じ定数値で設定することです。変更なし、未設定。本当に必要ですか？

実際、あなたが実際に行っていることは明らかではありません。あなたのパフォーマンスの問題は他の場所にあるかもしれません。