慢滾動切換沒有jQuery？

我知道它有點要問，但是如果不使用jQuery，可能會出現下列情況：我現在用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(); 
    });

來源

2017-06-16 Eddy

我沒有看到你的代碼中的任何性能問題，雖然有一些優化的空間。我不認爲jQuery可能是問題。

首先要注意的是CSS訪問。高度屬性訪問非常昂貴，因爲它會導致瀏覽器處理管道的許多渲染步驟，正如您在CSS Triggers中看到的那樣。

您正在檢索滾動事件中兩個元素的高度，這意味着它們將被多次計算。它真的有必要嗎？

如果您的#image-ul元素沒有改變其高度，也許您可以只在事件以外計算一次。

在窗口高度的情況下，我相信它不會在滾動事件中改變。如何創建不同的處理程序，一個用於需要（重新）計算窗口高度的事件，另一個用於不需要計算的事件。

另一個值得注意的問題是，您將'data-current-scroll-speed'和'data-speed-increment'屬性始終設置爲相同的常量值。沒有變化，沒有未設置。它真的有必要嗎？

其實，你不知道你在做什麼。您的性能問題可能在其他地方。

來源

2017-06-16 13:34:36 Rodris

謝謝@ Rodrigo Pedrosa！你正在提出一些好的觀點！我會盡力實施它們，並就結果回覆你。 – Eddy

再次感謝@Rodrigo Pedrosa。我現在試圖僅在加載或調整大小時檢索兩個元素的高度。但是我覺得我沒有把握好。請參閱我的答案中的代碼。此外：＃image-ul響應地改變高度。進一步說：「另一個值得注意的地方是，你設置'data-current-scroll-speed'和'data-speed-increment'屬性總是具有相同的常量值，沒有變化，沒有未設置，是否真的有必要？這我不明白你的意思。 – Eddy

請問@Rodrigo Pedrosa，請問您是否認爲這樣做會更好？ – Eddy

慢滾動切換沒有jQuery？

回答

相關問題