Question

我有一个表单，我需要插入一个项目，这里是表单的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>

就是这样。

连续有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 Chosen Plugin。

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

这里的东西往往超出界限。

在谷歌浏览器中，当我尝试在元素中输入一些值时页冻结。
在Safari中，将焦点转移到其他区域时会有4秒的延迟元素。并且在将几个焦点转移到几个输入元件上之后，滞后时间急剧减少到几毫秒。

我注意到的奇怪之处是当我从代码中删除<form>属性时。浏览器的性能得到改善，延迟很小或没有延迟。我不知道是什么导致了这种行为。

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

所以我的问题是：

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

任何可以提升性能，提示或任何可以帮助我提高性能的库都非常感谢。

谢谢。

Answer 1

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

如果我在网页上输入了497项，然后我的浏览器就崩溃了，我会非常恼火。很快就会有一个相当滥用的技术支持电话给你的办公室： - ）

找到一种方法来保存少量数据（一次说十个项目），这样您就不需要同时输入所有这些输入字段。这应该加快你的表现和让你对精神病患者更安全。

例如，将它们一次推送到服务器端数据库中的十个项目，由存储在客户端的cookie值标识。一次十个项目的场景是一个不错的页面大小（用户在十个项目块中编辑他们的列表）。基于网络的商务通过购物车等方式随时进行这类工作。

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

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

1 个答案: