HTML 文档中影响页面呈现速度的隐藏输入数量

Question

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

我现在的情况是页面上有一堆表单，每个表单最多包含 100 个 hidden 输入字段。我应该关注性能吗？为了维护目的，我已经在尝试减少这个数字，但我需要知道性能损失（如果有的话）。

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

Answer 1

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

速度较慢的原因是页面额外html 而不是隐藏字段。为了使我的陈述更清楚，就像添加 100 个段落元素，但我为每个元素设置了 CSS display:none;.

Answer 2

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

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

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

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

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

<!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>

HTML 文档中影响页面呈现速度的隐藏输入数量

Number of hidden inputs in HTML doc affecting page rendering speed

html

performance

pagespeed