Number of hidden inputs in HTML doc affecting page rendering speed

问题

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.

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

回答1:

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).

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.

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>

回答2:

I personally don't think it will effect the page rendering for 100 hidden input fields (maybe 0.005s slower, so small that is consider negligible).

The reason it is slower is because of the extra html in the page but not the hidden fields. To make my statement clearer is like adding 100 paragraph elements but I set each with an CSS display:none;.

来源：https://stackoverflow.com/questions/47132425/number-of-hidden-inputs-in-html-doc-affecting-page-rendering-speed

标签

html

performance

pagespeed