1

我有一个表单，我需要在其中插入一个项目，这是表单的 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 个输入元素。

代码在以下位置进行测试：

  • 浏览器：谷歌浏览器 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

所以我的问题是：

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

非常感谢任何可以提高性能、提示或任何可以帮助我提高性能的库类型。

谢谢你。

4

1 回答 1

3

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

如果我在 Web 表单上输入了 497 个项目，然后我的浏览器在我身上崩溃了，我会非常恼火。很快就会向您的办公室打一个相当滥用的技术支持电话:-)

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

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

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

于 2012-05-07T07:05:50.323 回答