隐藏 HTML 元素的更好的性能方法是什么？ [关闭]

Question

如果我有很多关注divs：

<div class="error"> </div>
<div class="error"> </div>
<div class="error"> </div>
<div class="error"> </div>
<div class="error"> </div>
...

一次隐藏它们的最佳方式（和最佳实践）是什么？

$('.error').hide() 或

.addClass('hide') 包括.hide { display: none; } ?

Answer 1

最好是一种意见，您可以运行 jsperf 测试，每个浏览器都会有所不同。

最后，您将在 JavaScript 中循环并添加类或设置样式属性，或者仅依靠 CSS 为您执行循环。

看看使用选择器

$(".error").hide();  // or .addClass() or .css("display","none")

它确实做到了：

1. 一个或多个元素的 DOM 查找
2. 它正在对集合进行 for 循环
3. 在循环迭代中获取当前元素
4. 在循环迭代中应用 css 规则
5. 最终进行重绘/重绘

但不必循环的一种方法是仅依靠在层次结构中添加 CSS 规则。

CSS：

.hideErrors div.error {
    display: none;
}

JavaScript：

$(document.body).addClass("hideErrors");

这是做什么的：

1. DOM 查找一个元素
2. 添加一个类
3. 最终进行重绘/重绘

这样您就不必循环遍历并为每个元素添加一个类。最好在包装错误列表的元素周围放置“hideError”规则。因此，将“body”更改为该父元素。

Answer 2

你选择哪个并不重要。如果它对您很重要，请运行基准测试。

无论如何，浏览器的大部分时间都在处理布局和重绘，添加类或内联样式（因为这是 .hide() 所做的，所以将 style="display: none; 添加到元素）实际上并不重要。

如果您关心性能，请放弃 jQuery，开始使用一些 vanilla JS，了解 page performance 并优化您的 JavaScript 和 CSS 选择器。

老实说，如何修改 DOM 是您最不应该担心的事情：)

Answer 3

“最佳”一词实际上并没有足够的信息，因为它可能意味着性能（速度）或大小（包含的库）。

如果您已经在使用 JQuery，它通常是一个非常高效的库，以下是在 DOM 完成加载后您将如何执行此操作。

$( document ).ready(function() {
    $('.error').hide()
});

除了“DOM 就绪”之外，JQuery 还定义了其他事件，您可以将动作挂钩，这就是为什么它是一个方便的库的原因。

如果您只对整体速度感兴趣并且想避免使用外部库，那么 CSS 通常是您最快的方法，您可以按照样式表中的说明添加类。这限制了您可以在 DOM 加载之前隐藏它们的时间。

对于您描述的所有情况，都有最好和最坏的情况。 Javascript 必须循环（解析）DOM，所以它总是比纯 CSS 慢。

Answer 4

我认为添加和删除类将是更好的处理方式。

通过这种方式，您还可以进行与错误消息相关的其他样式更改。

  css code : 

   .showdiv {
      display : block;
   }

   .hidediv {
      display:none; 
    }

  javascript code :

   $('.error').addClass('showdiv')  

   $('.error').removeClass('hidediv')

Answer 5

如果您希望它们在页面加载时隐藏，请添加一个隐藏到 div 的类。

.hidden{
    display: none;
}

使用 jquery 来显示和隐藏。

$('.error').hide();
$('.error').show();