哪个表现更好，检查类或添加类

如果你有一个在滚动事件上触发的函数，那就更好了。

1. 检查是否已添加类，如果没有添加
2. 不要做任何检查，只需在每次需要时添加该类。

$(document).on('scroll', function () { var scrollTop = $(this).scrollTop(); if (scrollTop > 50) { if (!$("nav .branding").hasClass("collapse")) $("nav .branding").addClass("collapse"); } else { if ($("nav .branding").hasClass("collapse")) $("nav .branding").removeClass("collapse"); } }); 

要么

 $(document).on('scroll', function () { var scrollTop = $(this).scrollTop(); if (scrollTop > 50) { $("nav .branding").addClass("collapse"); } else { $("nav .branding").removeClass("collapse"); } }); 

第一次有一个额外的检查，但在另一个行动中可能（？）是一个更激烈的操作（？）

Answer 1

如果您担心性能，您可以/应该做的事情有以下几点：

1.缓存选择器：

Dom交互很昂贵，在您的情况下，您多次调用$("nav .branding") 。

将其存储在变量中，如var $branding = $("nav .branding") 。

2.使用vanilla javascript来处理该类

取决于浏览器支持 。

var branding = document.querySelector('nav .branding');

 if (scrollTop > 50) { if (!branding.classList.contains("collapse")) { branding.classList.add("collapse"); } } else { if (branding.classList.contains("collapse")) { branding.classList.remove("collapse"); } } 

请记住，并非所有浏览器都支持classList属性，在MDN上，您可以找到有关兼容性的信息以及polyfill 。

关于你原来的问题：jQuery的addClass有一个内置的检查是否已经存在该类，所以你最好不要事先使用hasClass因为它会导致冗余，但要记住addClass 性能比不到70％。 classList 。

Answer 2

第二个是首选，因为调用addClass/removeClass removeClass依赖于现有类会导致不显眼的后果。

这意味着，如果调用了addClass并且该类已经存在，则不会再次添加它。

删除相同。 如果该类不存在，则不执行任何操作

Answer 3

就像你说的那样， .hasClass()是一个额外的检查，占用了浏览器的内存。 .addClass()首先在内部进行检查，然后仅在特定类不存在时才进行添加。

因此，显然， .addClass()和.removeClass()比使用.hasClass()进行首次检查更具性能。 基本上，使用.hasClass()是一项额外的无用工作。

这是一个片段来certificate.addClass()已经检查了现有的类或者没有复制类名：

 $(function () { $("#classCheck").addClass("class"); $("#classCheck").addClass("class"); }); 

Answer 4

第一种解决方案更快，但不是很多。 （读：应该是无关紧要的） https://github.com/jquery/jquery/blob/master/src/attributes/classes.js

如果你想要平滑的性能，我会建议限制function。

阅读： https ： //remysharp.com/2010/07/21/throttling-function-calls

限制确保仅每n ms调用一次函数。

 $(document).on('scroll', throttle(500, function () { var scrollTop = $(this).scrollTop(); if (scrollTop > 50) { if (!$("nav .branding").hasClass("collapse")){ $("nav .branding").addClass("collapse"); } } else { if ($("nav .branding").hasClass("collapse")) { $("nav .branding").removeClass("collapse"); } } })); 

编辑：

因为@kitler提到存储对dom元素的引用是一个很好的提示。 这可以防止jquery每次都必须找到该元素。

Answer 5

我会选择选项2，因为你在选项1中进行jQuery DOM选择只是为了测试该类是否可用，这应该是它的昂贵部分。

话虽这么说，最好只在函数外部存储对DOM对象的引用一次，并且仅对该引用进行处理。