反复添加/删除类会减慢速度？

所以我想做一些事情上与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

反复添加/删除类会减慢速度？

回答

相关问题