如何提高具有数千个输入元素的html表单的速度

我有一个表单，我需要在其中插入一个项目，这里是表单的html

<form action="test.php" class="form" method="post">
    <?php for($i=0; $i<=500; $i++): ?>
        <div class="formRow itemList">
            <select class="chzn-select" tabindex="2" name="items[]">
                <option value="3">Toys</option>
                <option value="4">Books</option>
                <option value="5">Shirts</option>
                <option value="6">iPad</option>
            </select>
            <span style="width:7%;float:left;margin-left:2%;" style="">
                <input type="text" name="quantity[]" class="est_quantity" placeholder="quantity" value="10"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="cost[]" class="est_cost" placeholder="cost" value="100"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="rate[]" class="est_rate" placeholder="rate" rate="200"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="size[]" class="est_size" placeholder="size"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="cartonnum[]" class="est_carton_no" placeholder="carton no."/>
            </span>
            <span style="width:8%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="numofcarton[]" class="est_cartons" placeholder="ctns."/>
            </span>
            <span style="width:8%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="qtyctn[]" class="est_qtyctn" placeholder="qty/ctn"/>
            </span>
            <span style="width:7%;float:left;margin-left:2.5%;" style="">
                <input type="text" name="cbm[]" class="est_cbm" placeholder="cbm"/>
            </span>
            <div class="clear"></div>
            <a href="#" class="itemRemove">Remove</a>
        </div>
    <?php endfor; ?>
</form>

玩具
书
衬衫
iPad

事情是这样的

• 一行中有9个输入元素
• 有时我需要输入300到500个项目
• 总计500*9=4500个输入元素

测试代码的时间：

• 浏览器：google chrome 18.0.1025和safari 5.1.3
• 操作系统：OSX 10.7.3
• 环境：本地

当我尝试执行代码时，我得到了很好的性能，下面是统计数据

页面加载时间：

• 一般页面加载时间：平均2.4秒
• 应用css样式：平均5.3秒
• 应用css样式并包含一些js库：平均3.1秒
  -我不知道为什么在包含js库后页面加载时间会减少，我正在使用jQuery、jQuery ui和其他插件，如jQuery Selected Plugin

鼠标和键盘焦点上的输入元素响应时间：

这就是事情往往越界的地方

• 在google chrome中，当我尝试在元素中输入一些值时 页面冻结
• 在Safari中，焦点转移到其他位置时会有4秒的延迟 元素。在将几个焦点转移到几个输入元素上之后，滞后时间会急剧减少到几毫秒

我注意到的一件奇怪的事情是当我从代码中删除

属性时。在两个浏览器上都有很小的延迟或没有延迟的情况下，性能得到了提高。我不知道是什么导致了这种行为

我正在使用此插件动态插入表单元素的行：

所以我的问题是：

• 如何提高加载速度，更重要的是如何停止导致脚本停止由浏览器执行的奇怪行为
• 浏览器打开时导致此行为的原因是什么 使用表单元素

非常感谢能够提高性能的任何类型的库、技巧或任何能够帮助我提高性能的东西

谢谢。

好的，所以有时候你需要输入300-500个项目。不总是这样。你真的需要在一个页面上输入它们吗

如果我在网络表单上输入了497个条目，然后浏览器崩溃了，我会非常恼火。随后很快就会有一个相当粗暴的技术支持电话打到您的办公室：-）

找到一种保存少量数据的方法（比如一次保存十个项目），这样您就不需要同时使用所有这些输入字段。这既可以加快你的表现，也可以让你远离精神病患者

例如，将它们一次放入服务器端数据库中十个项目，由存储在客户端的cookie值标识。一次十个项目的场景是一个不错的页面大小（用户在十个项目块中编辑他们的列表）。基于网络的商业一直在做这类事情，比如购物车之类的

---

当用户想要提交整个列表时，cookie值用于将所有页面绑定在一起，以提交一个有凝聚力的工作单元。

是否有穷人填写了300-500项？我想过使用datatables或其他方法对其进行分页。问题是他们一次输入所有数据。如果您有其他建议或建议，我很乐意听取您的意见solution@IbrahimAzharArmar，请参阅更新以了解一种可能的解决方案。