最好不要渲染HTML,还是添加display:none?

时间:2015-02-06 22:50:14

标签: html css displayattribute

据我了解,根本不渲染元素的HTML或添加display:none,似乎有完全相同的行为:两者都使元素消失而不与HTML交互。

我正在尝试禁用和隐藏复选框。所以HTML的总量很小;我无法想象性能可能是一个问题。

就编写服务器代码而言,编码工作大致相同。

鉴于这两种选择,一种比另一种更好的做法?或者根本不使用哪个?

6 个答案:

答案 0 :(得分:4)

  

据我了解,根本不渲染元素的HTML或添加display:none,似乎有完全相同的行为:两者都使元素消失而不与HTML交互。

不,这两个选项没有"完全相同的行为"。

如果使用CSS隐藏元素(display:none),它仍将呈现为

  • 不支持CSS的用户代理(例如,文本浏览器)和
  • 覆盖CSS的用户代理(例如,用户样式表)。

因此,如果您不需要它,请不要包含它。

如果出于某种原因, 包含该元素,但它与您的文档/用户无关(无论在哪个演示文稿中),请使用hidden attribute。通过使用此属性,您可以提供有关HTML级别的信息,因此不需要CSS支持/相关 您可能还想使用display:none(这是许多CSS支持用户代理所做的事情,但它对于不支持hidden属性的支持CSS的用户代理非常有用。
您还可以使用aria-hidden state,这对于支持WAI-ARIA但不支持hidden属性的用户代理非常有用。

答案 1 :(得分:1)

我的意思是你需要那个复选框吗?如果没有,那么.hide()只是在地毯下刷东西。你正在使你的HTML和你的CSS混乱。但是,如果它确实存在,那么如果你没有复选框那么我就不会在HTML中使用它。

保持简单易读。

答案 2 :(得分:1)

我在隐藏它时唯一看到的好处是,您可能希望稍后将其添加回来,因为单击按钮或在页面中激活它。否则它只是让您的代码不必要地变长。

答案 3 :(得分:0)

对于这样一个小小的场景,结果几乎是一样的。但是用CSS隐藏控件是IMO不是你想养成的习惯。

将代码及其输出有效地提供到实用的点始终是一个好主意。所以如果你很容易通过添加一些条件在输出中不包含一些控件,可以整齐地管理所有内容,尝试这样做。当然,这不会扩展到接收输入的代码部分,因为您应该始终准备好处理任意数据(至少对于公共应用程序而言)。

另一方面,在某些情况下,产生输出的代码很难修改;特别是,让它有能力确定做什么可能涉及以下列不良做法的形式造成损害:可能添加一个全局变量,或者修改/覆盖几个函数,以便可以传递条件。在这种情况下,添加一点CSS以便再次以简短的本地化方式实现解决方案并非不合理。

值得注意的是,在某些情况下,决策可能会基于硬外部因素。例如,检测spambots的一个非常基本的机制是包含一个在HTML中与其他字段没有区别但在CSS中不可见的字段。在这种情况下,一个spambot可能会填充不可见的字段,从而让自己离开。

答案 4 :(得分:0)

我不喜欢在HTML中添加无法看到的标记,也没有任何用处。你没有在你的问题中提供这样做的单一好处,所以简单的答案是:如果你不需要一个复选框作为页面的一部分,那么不要把它包含在你的标记。

我怀疑隐藏的复选框不会为下载或服务器的工作添加任何明显的时间。所以我同意这不是一个考虑因素。但是,许多页面确实有额外的内容(评论,视图状态等),它们都可以加起来。所以,如果有人表示他们会继续前进并添加不需要且用户从未见过的内容,我希望他们能够创建总体上明显较慢的页面。

现在,您还没有提供有关您可能希望包含不需要的标记的原因的任何信息。虽然你没有说客户端脚本,但我可能会在隐藏的页面中留下元素的一种情况是我在编写客户端脚本来删除它们。在这种情况下,我可以hide()它并留在标记中。其中一个原因是,如果需要,我可以轻松再次显示它。

这是我的答案,但如果您描述了在页面上包含标记的注意事项,我认为您会得到更好的答案。当然,它必须提供您尚未披露的一些好处,否则您没有理由这样做。

答案 5 :(得分:0)

这里的混淆点是:为什么你使用display:none而不是简单地不渲染某些东西?

答案是:因为你正在做客户端!

当您进行客户端操作时,

“display:none”是更好的做法,其中元素可能需要消失或重新出现而无需额外访问服务器。在这种情况下,它仍然是页面逻辑结构的一部分,并且比删除(以及然后在Javascript中的内存中存储)并插入它更容易访问和操作它。

但是如果你使用服务器端的重型框架并且总是可以不渲染它,那么显示:none是没有意义的。

  • 如果客户必须完成工作,并使用“display:none”,并管理其与DOM的关系
  • 如果每次渲染/未渲染的决策发生变化时,请不要渲染它,服务器每次都会生成新的(并且相当不可变的)HTML。