反复添加/删除类会减慢速度吗？
所以我想用 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 运行，所以我想充分利用每一点可能的性能。
So I want to do a couple of things on scroll with jQuery...
$(window).scroll(function() {
//so it's not overly aggressive calling the funciton
setTimeout(function(){check_scroll()}, 50);
});
And then...
function check_scroll(){
var scroll = $(window).scrollTop()
if(scroll > 100) {
$("#fixed").addClass("fixed");
}
else
$("#fixed").removeClass("fixed");
};
So, my question is, #fixed will have the class ".fixed" most of the time, so if I repeatedly ask jQuery to add it, will it be non-performant? Should I first check if it has the class and then try to add it?
It seems fine as it is now, but my app will grow and there will be a lot of js going on, so I want to milk every bit of performance possible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您真的担心性能，那么 $('#fixed') 将会更值得关注。您应该将结果保存在一个变量中，除非 #fixed 每次查询时都会有所不同。
添加和删除类的问题主要是“这取决于”。添加和删除类实际上有什么作用？它是否会改变页面的布局，或者您是否将其用作其他内容的标志？如果它改变了页面的布局，那么你就别无选择。如果没有，那么您可以使用 .data 方法来存储状态，这将避免 回流（添加/删除类的主要性能问题）。
我还关心你的 check_scroll 函数在实践中会被调用多少次。您不会取消以前的 setTimout 事件，因此，您最终会收到一堆 setTimeout 调用。也许你想要更多类似的东西：
If you are really worried about performance, the $('#fixed') is going to be of greater concern. You should stick the result of that in a variable unless #fixed is going to be something different every-time you query for it.
The question of adding and removing a class is mostly, "it depends". What does adding and removing the class actually do? Does it change the layout of the page or are you using it as a flag for something else? If it changes the layout of the page and then you have no choice. If it doesn't, then you could use the .data method instead to store state which will avoid reflow (the major performance issue with adding/removing classes).
I am also concerned about how many times your check_scroll function is going to be called in practice. You are not cancelling previous setTimout events and so, you will end up with a bunch of setTimeout calls. Probably you want something more like:
我认为使用元素上已存在的类调用 addClass 不会对性能造成影响。
您可以使用这段代码，它应该表现良好，因为在调用 addClass 或 removeClass 之前，toggleClass 首先使用 hasClass：
I don't think you will take a performance hit for calling addClass with a class that already exists on the element.
You could use this block of code and it should perform well since toggleClass first uses hasClass before calling addClass or removeClass:
这段代码应该没问题，
jquery 文件只在浏览器中加载一次，一旦加载就可以完全运行。浏览器不需要每次调用文件来执行命令时都重新加载它。
在我看来，你的代码应该没问题。
This code should be fine,
The jquery file is only loaded once in a browser and once it is loaded it is fully operational. The browser doesn't need to reload it everytime it calls to the file to execute a command.
Your code should be fine, in my opinion.