隐藏输入太多会影响页面渲染速度吗？答案

【问题标题】：Does too many hidden inputs affect the page rendering speed?隐藏输入太多会影响页面渲染速度吗？
【发布时间】：2012-07-03 03:34:42
【问题描述】：

我需要在隐藏字段中保留一些关于我的控件的数据。我正在使用 MVC 3 进行记录。我担心的是我会像穷人的视图那样使用隐藏字段。在这样做时，我觉得我将冒着导致页面渲染缓慢（或更慢）的风险。我正在谈论的一个例子如下。

简而言之，页面上有很多隐藏字段会导致页面运行/渲染缓慢吗？

一行的外观示例：

<div>
    <div>1.</div>
    <div>
        Enter the measurements for the bridge legs (record from left to right, top, then bottom):
        (I am one of many rows in this form.)</div>
    <div><input type="text" id="1" name="leg" /><input type="hidden" id="1" name="dataid" value="101" />
        <input type="text" id="2" name="leg" /><input type="hidden" id="2" name="dataid" value="102" />
        <input type="text" id="3" name="leg" /><input type="hidden" id="3" name="dataid" value="103" />
        <input type="text" id="4" name="leg" /><input type="hidden" id="4" name="dataid" value="104" />
        <input type="text" id="5" name="leg" /><input type="hidden" id="5" name="dataid" value="105" />
        <input type="text" id="6" name="leg" /><input type="hidden" id="6" name="dataid" value="106" />
        <input type="text" id="7" name="leg" /><input type="hidden" id="7" name="dataid" value="107" />
        <input type="text" id="8" name="leg" /><input type="hidden" id="8" name="dataid" value="108" />
        <input type="text" id="9" name="leg" /><input type="hidden" id="9" name="dataid" value="109" />
        <input type="text" id="10" name="leg" /><input type="hidden" id="10" name="dataid" value="110" /></div>
    <div><input type="submit" value="Submit" /></div>
</div>

我最终会得到一个有 80 行的页面，每行有多个控件。鉴于这种情况，我是过度担心还是有正当的担忧？

【问题讨论】：

具有相同id的元素是无效的HTML。
我创建了我的小（？）小提琴来测试它：jsfiddle.net/zU5mN
您可能还想多考虑一下您的 UI。您是否有 80 个可见行，每个行有 10 个输入控件？
不，他们将在每个控件中有多个控件。一行可能有 1 个，另外 2 个，另外 4 个。取决于需要什么输入。
我猜根据建议避免隐藏字段，隐藏字段会使页面变慢。

标签： html asp.net-mvc asp.net-mvc-3 performance

【解决方案1】：

您可以使用可见输入的自定义属性来避免那些额外的隐藏字段

<input type="text" id="1" name="leg" data-id="101" />

使用 jquery，你会得到像这样的data-id 属性

var id = $('#1').data('id');

作为旁注，既然您说您有多行，请确保您没有重复输入 ID。

【讨论】：

但是如何将这些数据 ID 返回给控制器？目前我没有使用 jquery，只是库存，开箱即用的 MVC 3。
@dotnetN00b：您可以为所有输入使用一个隐藏字段，您可以使用 json 格式或您喜欢的任何其他格式。
@dotnetN00b：另外，我想知道您如何在服务器上使用这些值。我不清楚您是如何设置隐藏字段的值以及使用它们的目的。
我的数据库有一个表，其中有：dataid、ctrlid、savedData、userid、enteredDate。 ctrlID 是文本框的 ID。隐藏的输入代表 dataId。还有另一个表格包含该行的文本和控件。此信息在控制器中加入并在视图中布局。
您也可以使用包含两个 id 的复合 id。像服务器上的id = "ctrlid_dataid"id="1_101" 这样的东西你只需要拆分 id 来获取这两个值。

【解决方案2】：

我也强烈建议使用 jQuery-HTML5 data() API。

如果这些值是互补数据，您应该使用它。

请参阅我的answer 这个问题。

至于将其传递给控制器，您可以通过 Ajax 传递它，如果这是您可以尝试的选项。

$.ajax({
  url : '/Controller/Action/',
  data : { param1 : 'Hello' }
});

【讨论】：