这是一个更昂贵的电话？显示隐藏dom节点或创建删除dom节点 [英] which is one more expensive to call? showing-hiding a dom node or creating-deleting a dom node

问题描述

哪个是更昂贵的电话？

1. 显示隐藏的dom节点或


2. 创建删除dom节点

假设我们需要操纵的只有1个或几个（少于5个）的节点，并且应用程序在桌面上运行。

对于一小部分，它甚至是重要的吗？
移动应用程序如何？

解决方案

只有少数元素，两者之间的区别将是无限小的 - - 绝对可以忽略不计。

这就是说，通过CSS显示和隐藏元素将会更快，除非你使用jQuery的 .show（）和 .hide（） 。 jQuery的 .hide（）比隐藏元素的任何其他方法慢得多。如果您想知道为什么，请阅读为什么 .hide（）更慢？在我的答案底部。

无论如何，您应该根据最适合您需求的方法进行决策。如果你再也不需要这个元素，你也可以删除它。如果你不想隐藏它一段时间或某些条件下，显示/隐藏它。

但是，如果你想自己测试， here ya go ：）

---

为什么 .hide（）更慢？

jQuery的与使用 .css（'display'，'none'）基本相同 除它缓存了显示样式的以前的值，所以当你调用 .show（）时，你的元素将被正确地恢复，看起来完全一样。如果它有 display：inline ，那么它会被重新显示。如果它有 display：block ，它将具有 display：block 。这可能是非常有用的。

这里有一个例子：

让我们说一个div，id = myDiv，并在外部文件中使用显示：inline 。我们要隐藏它。

使用 .css 方式，我们会这样做：

  $（'＃myDiv'）。css（'display'，'none'）; 
  

然后稍后，您的同事开发人员希望在某些条件下再次显示。他不知道显示属性应该是什么，因为css在某个外部文件中。大多数开发人员默认为 display：block ，如下所示：

  $（ '#myDiv'）的CSS（ '显示器'， '块'）。 
  

然而，在这种情况下，我们会得到完全不同的风格，因为它最初是内联。一个聪明的开发人员将无法弄清楚出了什么问题，但不是所有开发人员都很聪明：）

使用 .show（）和 .hide（），这成为一个非问题。我们不在乎使用哪种风格。我们只是想让它回到原来的位置，这正是它会做的。

Which is one more expensive to call?

1. showing-hiding dom node or
2. creating-deleting dom node

Assume there is only 1 dom or a few (less than 5) nodes that we need to manipulate and the application runs on desktop.

For a small number, does it even matter at all? How about for mobile applications?

解决方案

The difference between the two will be infinitesimally small for only a few elements -- it could absolutely be considered negligible.

That being said, showing and hiding the element via CSS will be faster unless you use jQuery's .show() and .hide(). jQuery's .hide() is much slower than any other method of hiding an element. If you'd like to know why, read the "Why is .hide() slower?" section at the bottom of my answer.

Anyway, you should make your decision based on which method suits your needs best. If you don't ever need the element again, you may as well delete it. If you just wan't to hide it for a little while or under certain conditions, show/hide it.

But if you want to test it yourself, here ya go :)

---

Why is .hide() slower?

jQuery's .hide() is basically the same as using .css('display','none') except that it caches the previous value of the display style, so that when you call .show(), your element will be correctly reverted to look the exact same as it did. If it had display:inline, it'll have it when it gets re-shown. If it had display:block, it'll have display:block. This can be pretty useful.

Here's an example:

lets say we have a div with id="myDiv" and it is styled in an external file with display:inline. We want to hide it.

With the .css way, we'd do this:

$('#myDiv').css('display','none');

and then later on sometime, one of your fellow developers wants to show it again under certain conditions. He'll have no idea what the display property should be, since the css is in an external file somewhere. Most developers default to display:block, like this:

$('#myDiv').css('display','block');

However in this case, we'd get a totally different style, since it was originally inline. A clever developer will have no problem figuring out what went wrong, but not all developers are clever :)

With .show() and .hide(), this becomes a non issue. We don't care what style it used to have. We just want it to be back where it was, and that's exactly what it'll do.

这篇关于这是一个更昂贵的电话？显示隐藏dom节点或创建删除dom节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！