这是一个更昂贵的电话?显示 - 隐藏dom节点或创建 - 删除dom节点

时间:2012-08-22 18:36:46

标签: javascript jquery dom

打电话要贵一个?

  1. 显示隐藏的dom节点或
  2. 创建 - 删除dom节点
  3. 假设我们需要操作的节点只有1个dom或少数(少于5个),并且应用程序在桌面上运行。

    对于少数人来说,它甚至是否重要? 移动应用程序怎么样?

1 个答案:

答案 0 :(得分:4)

两者之间的差异对于少数几个元素来说无限小 - 它绝对可以忽略不计。

话虽如此,通过CSS显示和隐藏元素会更快,除非你使用jQuery的.show().hide() 。 jQuery的.hide()比隐藏元素的任何其他方法慢得多。如果您想知道原因,请阅读“为什么.hide()更慢?”我的答案底部的部分。

无论如何,您应该根据最适合您需求的方法做出决定。如果您不再需要该元素,您也可以删除它。如果您只是暂时隐藏它或在某些条件下隐藏它,请显示/隐藏它。

但如果您想自己测试一下,here ya go:)


为什么.hide()会变慢?

jQuery的.hide()与使用.css('display','none') 除了基本相同,它会缓存display样式的先前值,因此当您调用{{ 1}},你的元素将被正确地恢复为与它完全相同。如果它有.show(),它会在重新显示时显示。如果它有display:inline,则会display:block。这非常有用。

以下是一个例子:

假设我们有一个id为“myDiv”的div,并且它在带有display:block的外部文件中设置样式。我们想隐藏它。

使用display:inline方式,我们会这样做:

.css

然后在某个时候,你的一位开发人员希望在某些条件下再次显示它。他不知道$('#myDiv').css('display','none'); 属性应该是什么,因为css位于某个外部文件中。大多数开发人员默认为display,如下所示:

display:block

然而在这种情况下,我们会得到一种完全不同的风格,因为它最初是$('#myDiv').css('display','block'); 。一个聪明的开发人员可以毫无困难地找出问题所在,但并非所有开发人员都聪明:)

使用inline.show(),这就成了一个问题。我们不关心使用的样式。我们只是希望它回到原来的位置,而这正是它所做的。