影响页面渲染速度的 HTML 文档中隐藏输入的数量答案

【问题标题】：Number of hidden inputs in HTML doc affecting page rendering speed影响页面渲染速度的 HTML 文档中隐藏输入的数量
【发布时间】：2017-11-07 01:54:48
【问题描述】：

HTML 文档中hidden 输入字段的数量是否会影响浏览器中页面呈现的速度？是还是不是？我的猜测是答案是否，因为hidden 字段根本没有呈现。如果我错了，请纠正我。

我的情况是页面上有一堆表单，每个表单都装饰有多达 100 个hidden 输入字段。我应该关注性能吗？出于维护目的，我已经尝试减少此数字，但我需要知道性能损失（如果有的话）。

注意：here 提出了类似的问题，但尽管人们给出了变通办法，但没有人解决实际的基于性能的问题

【问题讨论】：

不知道渲染速度是否受影响，但网络加载速度受影响（移动连接）。
@SebastianBrosch：有趣的观察。确切地说（因此我们在同一页面上），您是说需要发送更多数据，因此这会影响网络传输。 DOM 处理呢，因为每个hidden 字段都是DOMString？

标签： html performance pagespeed

【解决方案1】：

隐藏的<input> 字段会影响渲染速度，但只会影响大量字段 (> 500)。但是网站的加载速度受到的影响更大！您正在加载不必要的 HTML 元素。因此，这可能是互联网连接速度慢（如移动互联网）的一个因素。

我建议删除所有不需要提高加载速度的 HTML 代码。完成此步骤后，您不必担心渲染速度。

我现在已经检查并测试了 Google Chrome 中的行为。我用不同数量的隐藏<input> 字段（0、100、1.000、10.000）创建了不同的 HTML 文件。所以我跟踪了一些有趣的因素（加载、渲染和绘画速度），结果如下：

注意：所有数字以毫秒为单位 - 毫秒

我在本地文件中使用了以下具有不同数量的隐藏输入字段的模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <form action="#" method="post">
      <input type="text"/>
      <input type="hidden"/> <!-- x times -->
    </form>
  </body>
</html>

【讨论】：

非常中肯。我认为可以使用的一种策略是将所有必填字段打包到一个连接的hidden 字段中，然后在服务器上将其分解为单独的标记。这有助于减少通过网络发送的有效负载的大小，并且仍然足够灵活。
@HassanBaig - 用一些附加信息更新了答案。
太棒了

【解决方案2】：

我个人认为这不会影响 100 个隐藏输入字段的页面渲染（可能慢 0.005 秒，小到可以忽略不计）。

它变慢的原因是页面中的额外html而不是隐藏字段。为了让我的陈述更清晰，就像添加 100 个段落元素，但我为每个段落元素设置了一个 CSS display:none;。

【讨论】：

感谢文森特插话。既然每个hidden 字段都是DOMString，那么对DOM 处理有何影响？
我认为这取决于您使用的 JavaScript 代码，如果您要执行循环遍历 100 个隐藏字段的操作，那么我认为它会更慢，但如果您专门针对使用 @987654324 @。我认为这不会是一个问题......我可能又错了。
好吧，我现在是从纯 HTML/CSS 的角度说的，不涉及 JS。
如果仅从 HTML/CSS 的角度来看，隐藏字段将被渲染，同样它是如此之小以至于仅 100 个隐藏字段可以忽略不计。你可以在浏览器中打开开发者工具，你可以看到所有隐藏的字段也被渲染了。
很公平。此外，您如何看待 Sebastian 在该问题下的评论 - 即网络传输也会变得臃肿 - 这可能是移动互联网受限的一个因素。