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

问题描述：

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

Does the number of hidden input fields in an HTML document affect the speed of page rendering in a browser? Yes or no? My guess is the answer is no since hidden fields aren't rendered at all. Correct me if I'm wrong.

在这种情况下，我的页面上有一堆表格，每个表格最多可容纳100个hidden输入字段.我应该关注表现吗?我已经在尝试出于维护目的而减少此数目，但是我需要知道性能损失(如果有的话).

I'm in a situation where I have a bunch of forms on the page, each decked out with up to 100 hidden input fields. Should I be concerned in terms of performance? I'm already trying to reduce this number for maintenance purposes, but I need to know the performance penalty (if any).

注意:此处，但是尽管人们给出了解决方法，但是没有人解决基于性能的实际问题

Note: A similar question was asked here, but although people gave work-arounds, nobody addressed the actual performance-based question

答

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

The rendering speed is affected on hidden <input> fields but only on a heavy amount of fields (> 500). But the loading speed of the website is more affected! You are loading unnecessary HTML elements. So this can be a factor on slow internet connections (like mobile internet).

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

I recommend to remove all HTML code you doesn't need to improve the loading speed. After this step you don't have to worry about the rendering speed.

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

I have now inspected and tested the behaviour in Google Chrome. I created different HTML files with a different amount of hidden <input> fields (0, 100, 1.000, 10.000). So I tracked some interesting factors (loading, rendering and painting speed) with the following result:

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

Note: all numbers in ms - milliseconds

我将以下模板与本地文件上不同数量的隐藏输入字段一起使用:

I used the following template with the different amount of hidden input fields on a local file:

<!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文档中隐藏的输入数量会影响页面渲染速度

相关推荐