反覆添加/刪除類會減慢速度？

所以我想做一些事情上與jQuery滾動...反覆添加/刪除類會減慢速度？

$(window).scroll(function() { 
    //so it's not overly aggressive calling the funciton 
    setTimeout(function(){check_scroll()}, 50); 
});

然後......

function check_scroll(){ 
    var scroll = $(window).scrollTop() 
    if(scroll > 100) { 
    $("#fixed").addClass("fixed"); 
    } 
    else 
    $("#fixed").removeClass("fixed"); 
};

所以，我的問題是，#FIXED將有類「 .fixed「大部分時間，所以如果我反覆要求jQuery添加它，它會不會是高性能的？我應該首先檢查它是否有班級，然後嘗試添加它？

它現在看起來很好，但我的應用程序將會增長，並且會有很多js正在進行，所以我想要儘可能地提高性能。

來源

2011-04-01 Duopixel

如果你擔心性能，因爲你常常調用這個，你應該緩存'$（「＃固定」）'和'$（窗口）' – 2011-04-01 21:00:37

如果你真的擔心表現，$（'＃fixed'）將會更受關注。你應該把這個結果保存在一個變量中，除非#fixed在每次查詢時都會有所不同。

添加和刪除類的問題大多是「它取決於」。添加和刪除類實際上做了什麼？它是否會更改頁面的佈局，或者將它用作其他內容的標誌？如果它改變了頁面的佈局，然後你別無選擇。如果沒有，那麼你可以使用.data方法來存儲狀態，這將避免reflow（添加/刪除類的主要性能問題）。

我也關心你的check_scroll函數在實踐中會被調用多少次。你並沒有取消以前的setTimout事件，所以你最終會得到一堆setTimeout調用。也許你想要更多的東西一樣：

(function() { 
    var timeout = null, fixed = $('#fixed'), win=$(window), 
    check_scroll = function() { 
     var scroll = win.scrollTop(); 
     fixed.toggleClass("fixed", scroll > 100); 
     timeout=null; 
    } 
    win.scroll(function() { 
     if (timeout) { 
     // only do once every 50ms 
     return; 
     } 
     timeout = setTimeout(check_scroll, 50); 
    });

來源

2011-04-01 20:57:36 lambacck

我同意緩存$（「＃fixed」）的結果。內容是否改變並不重要，他所做的只是切換一個班級。我猜他正在將課程添加到他想要停留在頁面頂部的某個東西上。 – 2011-04-01 21:01:28

我同意他希望它保持卡住狀態。但是更多的決定是關於類是否切換，因爲人們使用類來存儲非視覺狀態，而使用.data（）更好地處理這個問題。寫入className將觸發重排，閱讀通常不會，並且由於jQuery檢查，除解析className和檢查之外，可能並不重要。 – lambacck 2011-04-01 21:07:57

我不認爲你會用一個已經存在於元素上的類來調用addClass的性能。

你可以使用這個代碼塊，它應該表現良好，因爲toggleClass首先使用hasClass調用addClass或removeClass前：

$("#fixed").toggleClass("fixed", scroll > 100);

來源

2011-04-01 20:48:00

喜歡撥動了hasClass ，addClass，因爲jquery負責處理當前狀態 – ezmilhouse 2011-04-01 20:57:27

感謝TB代碼片段是黃金！ – Duopixel 2011-04-02 02:12:19

此代碼應該罰款，

jQuery的文件只裝載一旦在瀏覽器中，一旦它被加載，它就可以完全運行。每次調用該文件執行命令時，瀏覽器不需要重新加載它。

我認爲您的代碼應該沒問題。

來源

2011-04-01 20:49:01 PHP

反覆添加/刪除類會減慢速度？

回答

相關問題