完全不呈现 HTML 或添加 display:none 会更好吗？答案

【问题标题】：Is it better to not render HTML at all, or add display:none?完全不呈现 HTML 或添加 display:none 会更好吗？
【发布时间】：2015-04-07 05:02:06
【问题描述】：

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

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

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

考虑到这两个选项，一个比另一个更好吗？或者我使用哪个根本不重要？

【问题讨论】：

哇，这很难理解。但是，如果您的标记中不需要复选框，那么我会说您不应该在标记中包含复选框。
@JonathanWood 有什么难理解的？
你的英语和你的问题。我的评论对你有意义吗？
@JonathanWood 这样更容易理解吗？
@JonathanWood 我认为您的评论是有道理的，但我可能会遗漏一些东西。我知道这是两种选择之一，我想很高兴知道你会做什么，但没有引用任何推理或专业知识，它对我没有任何帮助。

标签： html css displayattribute

【解决方案1】：

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

不，这两个选项没有“完全相同的行为”。

如果你用 CSS (display:none) 隐藏一个元素，它仍然会被渲染

不支持 CSS 的用户代理（例如文本浏览器），以及
覆盖您的 CSS 的用户代理（例如，用户样式表）。

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

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

【讨论】：

很好的答案，甚至包括了一些我不知道的东西。

【解决方案2】：

我的意思是你需要那个复选框吗？如果不是，那么.hide() 只是在地毯下刷东西。你让你的 HTML 和你的 CSS 一样混乱。但是，如果它需要在那里，那么肯定，但如果你可以不使用复选框，那么我不会在 HTML 中使用它。

保持简单易读。

【讨论】：

HTML 当然是不可读的，因为它经过了编译步骤。源文件是一个模板，要么有“if(condition) display=none”，要么有“if(!condition) /* checkbox source */”，可读性没有区别。
但它还在吗？如果不需要它，为什么它在那里？仅仅因为你在它上面做了一个.hide() 并不意味着那个元素不存在吗？是的，这两件事对最终用户来说有点像，它们不显示元素，但一种方式实际上是删除它，另一种方式隐藏它？

【解决方案3】：

我在隐藏它时看到的唯一积极的事情是，您可能希望稍后由于单击按钮或在页面中激活它的其他东西而将其重新添加。否则，它只会使您的代码不必要地更长。

【讨论】：

【解决方案4】：

对于如此微小的场景，结果实际上是相同的。但是使用 CSS 隐藏控件并不是 IMO 想要养成的习惯。

使代码及其输出高效到实用的程度始终是一个好主意。所以如果你很容易通过添加一个小条件而不在输出中包含一些控件，那么一切都可以整齐地管理，试着这样做。当然，这不会扩展到接收输入的代码部分，因为您应该始终准备好处理任意数据（至少对于公共应用程序而言）。

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

还值得注意的是，在某些情况下，决策可能最终取决于外部因素。例如，检测垃圾邮件机器人的一个非常基本的机制是包含一个在 HTML 中看起来与其他字段没有什么不同但在 CSS 中不可见的字段。在这种情况下，垃圾邮件机器人可能会填充不可见的字段，从而暴露自己。

【讨论】：

【解决方案5】：

这里的困惑点是：你为什么曾经使用 display: none 而不是简单地不渲染？

答案是：因为你是在客户端做的！

"display: none" 是更好的做法，当您进行客户端操作时，元素可能需要消失或重新出现而无需额外访问服务器。在这种情况下，它仍然是页面逻辑结构的一部分，并且比删除（然后在 Javascript 中存储在内存中）并插入它更容易访问和操作它。

但是，如果您使用的是服务器端繁重的框架并且总是可以不渲染它，是的，display:none 是毫无意义的。

如果客户端必须完成这项工作，请使用“display:none”，并管理其与 DOM 的关系
如果每次渲染/不渲染的决定发生变化，服务器每次都会生成新的（并且相当不可变的）HTML，则不要渲染它。

【讨论】：

【解决方案6】：

我不喜欢在您的 HTML 中添加不可见且无用的标记。您没有在问题中提供这样做的任何好处，因此简单的答案是：如果您不需要复选框作为页面的一部分，则不要将其包含在您的标记中。

我怀疑隐藏的复选框不会为服务器的下载或工作增加任何明显的时间。所以我同意这不是一个真正的考虑因素。但是，许多页面确实有额外的内容（cmets、viewstate 等），而且它们都可以加起来。因此，任何持有他们会继续添加用户不需要且从未见过的内容的态度的人，我希望他们创建的页面总体上会明显变慢。

现在，您还没有提供任何信息来说明您可能希望包含不需要的标记的原因。尽管您对客户端脚本只字未提，但我可能会在页面中留下隐藏的元素的一种情况是，当我编写客户端脚本以删除它们时。在这种情况下，我可以hide() 它并留在标记中。原因之一是如果需要，我可以轻松地再次展示它。

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

【讨论】：

感谢您的帮助。我意识到我的困惑来自近视，因为我处于一种现代模板良好的框架中，但我实际上是在一个相对较瘦的客户端上编程，因此缺少 JS 标签，以及是否渲染复选框仅在服务器端执行，没有客户端状态更改。所以是的， display:none 在服务器繁重的框架中是毫无意义的。我所做的不理解是当你应该使用 display:none （答案是当你的客户更胖时），所以考虑到它是一个选项不知道我不见了。