how to improve speed of html form with thousand of input elements

Question

i have a form where i need to insert an item, here is the html of the form.

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

and it goes like this.

• there are 9 input elements in a row.
• sometimes i need to enter 300 to 500 items.
• that comes to a count of 500 * 9 = 4500 input elements.

The code is tested on:

• Browser: google chrome 18.0.1025 and safari 5.1.3
• Operating System : OSX 10.7.3
• environment: local

when i tried executing the code i get serious performance, here is the stats.

Page Loading Time:

• general page loading time: 2.4 seconds on average.
• with css style applied : 5.3 seconds on average.
• with css style applied and including some js libraries: 3.1 seconds on average
  - i have no idea why after including js libraries the page load time is being reduced, i am using jQuery, jQuery ui and some more plugins like jQuery Chosen Plugin.

Input element response time on focus of mouse and keyboard:

here is where thing tends to get out of bounds.

• In google chrome when i try inputting some values in elements the page freezes.
• In Safari there is a lag of 4 seconds while shifting focus to other elements. and after shifting several focus on several input elements the lag time is reduced drastically to few milliseconds.

The weird thing i noticed is when i remove <form> attribute from the code. the performance is improved with a very little lag or no lag on both the browser. i have no idea whatsoever is causing this behavior.

i am inserting the rows for form elements dynamically using this plugin : MultiField

so my question is:

• how do i improve the loading time speed and more importantly to stop the weird behavior that causes the script to stop execution by the browser?
• what is the reason for causing this behavior by browser on using form element.

any type of libraries that could boost the performance, tips, or anything that could help me improve the performance is greatly appreciated.

thank you.

Answer 1

Okay, so sometimes you need to enter 300-500 items. Not always. And do you really need to enter them all on one page?

I'd be pretty annoyed if I'd entered 497 items onto a web form and then my browser crashed on me. That would be followed pretty quickly by a rather abusive tech support phone call to your offices :-)

Find a way to persist smaller amounts of data (say ten items at a time) so you don't need all those input fields at once. This should both speed up your performance and make you a little safer from psychotic customers.

For example, shove them into a server side database ten items at a time, identified by a cookie value stored on the client side. The ten-items-at-a-time scenario is a nice page size (the user edits their list in ten-item chunks). Web-based commerce does this sort of stuff all the time, with their shopping carts and such.

When users want to submit the entire list, the cookie value is used to tie together all the pages to submit a cohesive unit of work.