隐藏HTML元素的性能更好的方法是什么

What is the better performance way to hide HTML elements?

本文关键字：方法 是什么 更好 性能 元素 隐藏 HTML      更新时间：2023-09-26

如果我有许多以下div s：

<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; }？

Best是一种观点，您可以运行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"更改为父元素。

选择哪一个并不重要。如果这对你来说很重要，那就运行一个基准测试。

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

如果您关心性能，请放弃jQuery，开始使用一些香草JS，了解页面性能并优化JavaScript和CSS选择器。

老实说，您最不应该担心的就是如何修改DOM：）

术语best实际上并不是足够的信息，因为它可能意味着性能（速度）或大小（包含的库）。

如果您已经在使用JQuery，那么它通常是一个非常高效的库，以下是DOM加载完成后的操作方法。

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

除了JQuery定义的"DOM就绪"之外，还有其他事件可以将操作挂接，这就是为什么它是一个方便的库。

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

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

我认为添加和删除类将是处理此问题的更好方法。

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

  css code : 
   .showdiv {
      display : block;
   }
   .hidediv {
      display:none; 
    }
  javascript code :
   $('.error').addClass('showdiv')  
   $('.error').removeClass('hidediv')

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

.hidden{
    display: none;
}

要显示和隐藏，只需使用jquery。

$('.error').hide();
$('.error').show();
相关文章：