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

如果我有很多下面div S：什么是更好的隐藏HTML元素的性能方式？

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

来源

2014-09-05 Alexey

当然要用CSS代替Javascript。所以'display：none;' – Siyah 2014-09-05 12:38:34

'$（'。error'）。hide（）'in CSS'{display：none}' – Jack 2014-09-05 12:40:15

使用CSS'.error {display：none;}'它会一次隐藏所有元素，与js你仍然需要等待页面加载来隐藏它们 – Arvind 2014-09-05 12:40:37

最佳的最后一件事是一个意见，你可以运行jsperf测试，每个浏览器会有所不同。

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

看使用选择

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

在它的盖：

一个DOM查找为一个或多个元件
它用于循环通过所述一组做一个
它获取循环迭代中的当前元素
在循环迭代中应用css规则
结束了做一个重绘/重绘

但有办法不用循环是仅仅依靠添加CSS规则越往上的层次结构。

CSS：

.hideErrors div.error { 
    display: none; 
}

的JavaScript：

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

这里做的事情：

DOM查找一个元素
再添一类
最终做了重绘/重绘

这样你就不必循环遍历并向每个元素添加一个类。将“hideError”规则放在包装错误列表的元素周围会更好。所以把“body”改成那个父元素。

来源

2014-09-05 12:45:21 epascarello

但这是一个相当低效的选择器。它仍然遍历DOM来查找'.error'，然后遍历每个查找'.hideErrors'。 – 2014-09-05 12:46:38

收益是用JavaScript或CSS循环DOM。 – epascarello 2014-09-05 12:47:10

你必须循环任一方式。事实是，你的表现问题不太可能来自你放课的地方。将项目从文档中消失以及为此需要重新刷新/重新绘制的副作用是会消耗大部分资源。 – 2014-09-05 12:48:43

-1

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

.hidden{ 
    display: none; 
}

要显示和隐藏只是使用jQuery。

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

来源

2014-09-05 12:39:55 Tim

这不是问题的答案。他要求最好的方法。 – Siyah 2014-09-05 12:40:41

使用.hide（）和.show（）是当前的标准，因为它是最好的答案。那就是他想知道的 – Tim 2014-09-05 12:45:59

*“现行标准”*什么标准？ – epascarello 2014-09-05 13:21:23

你挑哪个真的没关系。如果这对你很重要，那么运行一个基准测试。

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

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

老实说，你如何修改DOM是你应该担心:)

来源

2014-09-05 12:44:37

术语“最好”并不是真的足够的信息，因为它可能意味着性能（速度）或大小（包含的库）。

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

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

还有除此之外其它事件“DOM准备” jQuery的定义，你可以挂钩的动作为止，这就是为什么它是一个方便的库。

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

对于您所描述的所有情况，都有最佳和最差的情况。 JavaScript将不得不循环（解析）DOM，所以它总是比纯CSS慢。

来源

2014-09-05 12:52:16

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

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

css code : 

    .showdiv { 
     display : block; 
    } 

    .hidediv { 
     display:none; 
    } 

    javascript code : 

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

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

来源

2014-09-05 12:52:32

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

回答

相关问题