使用类进行javascript隐藏切换，还是直接隐藏？

什么更正确，性能更好： 我有一个包含元素的容器。根据单击的按钮，我需要显示/隐藏元素。例如：

<div id="panel">
   <button id="toggle-edit">Edit</button>
   <div class="form-group">
       <input type="text">
   </div>
   <div class="form-group">
       <input type="text">
   </div>
   <div class="form-group">
       <input type="text">
   </div>
</div>

还有一个简单的JS：

$("#toggle-edit").click(function() {
   $("#panel").toggleClass("show-inputs") 
});

2） 使用纯JS，无css类：

$("#toggle-edit").click(function(){
   $("#panel .form-group").toggle();
   // I might want toggle this.value = "Cancel"/"Edit" as well
});

---

在父元素上使用CSS类来影响子元素的可见性在技术上好吗？

我认为这与性能无关，而是与

---

所以，使用类将有助于重用代码。

这里我构建了一个工具来对这两种方法的执行时间进行基准测试

调用这两个方法250次并测量毫秒

在我的测试中

类切换花费了

7到10毫秒

来运行250次

jQuery toggle运行250次需要88到110毫秒

您可以在下面的代码段中随意运行它们；）

toggleClass=function（）{
$（“#面板”）.toggleClass（“显示输入”）
};
$（“#切换类”）。单击（切换类）；
jQueryToggle=函数（）{
$（“#panel jquery.form group”）.toggle（）；
};
$（“#切换隐藏”）。单击（jQueryToggle）；
//演示第一次运行
基准（“开始”）；
基准（）；
功能基准（start）{
var d=新日期（）；
var ms=1000*60*d.getMinutes（）+1000*d.getSeconds（）+d.getmillizes（）；
如果（启动）{
this.initTime=ms
}否则{
var timetake=ms-this.initTime；
删除此.initTime；
返回时间；
}
}
功能台H250（）{
var classTime，jqToggleTime；
基准（“开始”）；
对于（变量i=0；i<250；i++）{
toggleClass（）；
}
classTime=benchmark（）
基准（“开始”）；
对于（变量i=0；i<250；i++）{
jQueryToggle（）；
}
jqToggleTime=benchmark（）
$（“.results”）.append（“”+classTime+“”+jqToggleTime+“”）；
}
$（“.test250”）。单击（bench250）
#面板.窗体组{
显示：无
}
#panel.show-inputs.form组{
显示：块
}

测试结果
测试250次
类切换
jQuery切换
切换类
切换类
jQuery切换
jquerytoggle（）
“而且性能更好”-我认为这里不会有用户感觉到的性能差异。我知道，只是好奇而已。CSS规则的方式似乎是“让浏览器做他的工作”，而JS的方式是专门选择元素并告诉浏览器“隐藏这些”，所以从浏览器的角度来看，“使用类将帮助您重用代码。”-如果没有类，重用不是更容易吗，因为这样您就可以复制相关的JS并更改选择器，而不必协调样式表的更改？
$("#toggle-edit").click(function(){
   $("#panel .form-group").toggle();
   // I might want toggle this.value = "Cancel"/"Edit" as well
});