用于交换元素的 Javascript 与 CSS答案

【问题标题】：Javascript vs. CSS for swapping elements用于交换元素的 Javascript 与 CSS
【发布时间】：2013-01-10 20:19:11
【问题描述】：

我有一个相当长（约 100 个字段）的表单，其中包含在“快速”和“完整”引用之间切换的某些元素。这会将 75 个字段从隐藏切换为可见。目前，我通过一些简单的 jQuery 来做到这一点：

jQuery('.full_quote').show();
jQuery('.quick_quote').hide();

我意识到这可以通过使用 CSS 为我完成工作以不同的方式完成：

## Javascript:
  jQuery('#quote_form').toggleClass("full_quote quick_quote");

## CSS:
  form.toggle-form.full_quote .quick_quote {display: none;}
  form.toggle-form.quick_quote .full_quote {display: none;}

所以大部分问题是：在性能方面使用哪个更好？

我最初的想法是，在 jQuery 中迭代结果的开销将比 CSS 花费更多的时间。但是，我没有办法对此进行测试，所以我很好奇社区的经验。

【问题讨论】：

我会尽可能使用 CSS。
发现这个测试已经完成：jsperf.com/jquery-show-hide-vs-css-display-none-block/2
对我来说听起来像是过早的优化。您需要更改大量个元素的显示状态，才能注意到使用任一方法的性能下降。
我实际上已经在 IE 中看到只有 50 个字段的表单的性能下降，其中 40 个字段被换出。当然，Firefox 和 Chrome 处理得更好。
@JackM.，您是否分析了代码以确定瓶颈在于show 和hide，并且不是其他循环操作？如果我不得不猜测，我会说性能很差是由于几个低效的选择器。

标签： javascript css

【解决方案1】：

与其定义新的自定义类，或者使用 jQuery 的 show 和 hide 方法，我实际上建议使用第三种选择。

将[hidden] 属性添加到任何需要隐藏的元素，并在需要显示时删除该属性：

_JS:

$('.foo').attr('hidden', true);

为确保跨浏览器支持此功能，您需要添加一些 CSS：

_CSS:

[hidden] {
    display: none !important;
    visibility: hidden !important;
}

This also gives you the ability to override how "hidden" elements are styled, which can be useful for debugging.

当你想显示元素时，只需删除[hidden] 属性：

_JS:

$('.foo').attr('hidden', false);

如果 jQuery 实现 show 和 hide 来使用 [hidden] 那就太好了，相反，开发人员在使用 show 时需要小心，因为它会在添加 @ 时覆盖 display 的任何样式表声明987654337@ 内联样式。

【讨论】：

不错的答案！我要开始用这个了。

【解决方案2】：

两者本质上是一样的。 JQuery 在内部执行非常相似的相同逻辑。（见How does jquery's show/hide function work?）。而且它不像你的 CSS apprach 根本不使用 javascript（在这种情况下，这将是更好的选择）

所以，

jQuery('.full_quote').show();
jQuery('.quick_quote').hide();

说得通（无论如何你都在使用 JQuery，为什么不使用它的所有功能）更具可读性，并且

【讨论】：