Here you can find the whole example. By clicking on Click to Add you will clone 100 times the element trackOn; then it will be append to the table tracklistOn.

Unfortunatly, if these elements are inside a form you can see that the time is very high before the process is finish. If I remove the form, is quite immediate. Why this behaviour?

The whole code is here :

HTML

<div style="cursor:pointer;" id="addTr">Click to Add</div>   

<form action="index.php?status=add" method="POST">
    <table class="tracklistOn" cellpadding="0" cellspacing="0"></table>

    <table class="tracklistOff" style="display:none;">
        <tr class="trackOn"> 
            <td class="trackTime">
                <select class="trackTimeHH" name="hours[]">
                    <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option> 
                </select>
            </td>            

            <td class="trackTime">    
                <select class="trackTimeMM" name="minuts[]">
                    <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option>             
                </select>    
            </td>            

            <td class="trackTime">
                <select class="trackTimeSS" name="seconds[]">
                    <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option>
                </select>
            </td>            
        </tr>
    </table>        
</form>

jQuery

$('#addTr').click(function () {
    var savedTrackOn=$('.tracklistOff').find('.trackOn');
    for(i=0; i<100; i++) {
        savedTrackOn.clone().appendTo($('.tracklistOn'));
    }
});

How can I fix this problem?

EDIT

Tried it on Firefox 6.0, and the problems is vanished :O Only old version and chrome+IE? Why?

Here you can find the whole example. By clicking on Click to Add you will clone 100 times the element trackOn; then it will be append to the table tracklistOn.

Unfortunatly, if these elements are inside a form you can see that the time is very high before the process is finish. If I remove the form, is quite immediate. Why this behaviour?

The whole code is here :

HTML

<div style="cursor:pointer;" id="addTr">Click to Add</div>   

<form action="index.php?status=add" method="POST">
    <table class="tracklistOn" cellpadding="0" cellspacing="0"></table>

    <table class="tracklistOff" style="display:none;">
        <tr class="trackOn"> 
            <td class="trackTime">
                <select class="trackTimeHH" name="hours[]">
                    <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option> 
                </select>
            </td>            

            <td class="trackTime">    
                <select class="trackTimeMM" name="minuts[]">
                    <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option>             
                </select>    
            </td>            

            <td class="trackTime">
                <select class="trackTimeSS" name="seconds[]">
                    <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option>
                </select>
            </td>            
        </tr>
    </table>        
</form>

jQuery

$('#addTr').click(function () {
    var savedTrackOn=$('.tracklistOff').find('.trackOn');
    for(i=0; i<100; i++) {
        savedTrackOn.clone().appendTo($('.tracklistOn'));
    }
});

How can I fix this problem?

EDIT

Tried it on Firefox 6.0, and the problems is vanished :O Only old version and chrome+IE? Why?

• javascript
• jquery
• html
• forms
• clone

• 1 This is a great question. I found that the performance varies per browser, but the pattern remains the same. On a side note, I think an interface which wants me to select 100 times by using 3 different separate drop downs for each is something I would give up on very quickly. There might be another way to do this altogether. But I'd still like to know what causes this. – Nick Larsen Commented Aug 28, 2011 at 15:50
• Yeah. In fact the code to "replicate" is not so huge... but the performance is really slow. Hope that someone can help us :) – markzzz Commented Aug 28, 2011 at 16:39
• 1 Very interesting. I tried a few different things (i.e. using plain JS/DOM instead of jQuery; not having name attributes on the dropdowns; placing the template outside the form; using divs instead of tables; "cloning" with innerHTML instead of .clone() or cloneNode(); building the new rows "manually" with createElement(); etc.) but nothing really helped. As long as it's inside a form element, it's slow. Again: Interesting – Flambino Commented Aug 28, 2011 at 19:46

2 Answers 2

The documentation clearly states the following:

The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. When used in conjunction with one of the insertion methods, .clone() is a convenient way to duplicate elements on a page

Knowing this, it would be wise to limit the amount of deep traversal expected of .clone().

This issue is pletely unrelated to jQuery, as illustrated here where I've swapped out your code with host API code and the perceived performance issue still exists.

Lastly, I was able to identify another "work around" to this issue that would lead us to believe that the issue also lies in appending the new nodes, take a look and you'll see that moving the destination element out of the form also improves the performance drastically.

This is just to flesh out my ment from earlier, and echo what Rick said.

I've tried the following (in Safari):

• Using plain javascript (no jQuery): Still slow
• Using divs instead of tables: Still slow
• Using innerHTML instead of .clone()/cloneNode(): Still slow
• Moving the template out of the form: Still slow
• Building the elements from scratch instead of cloning: Still slow
• Appending everything to a temporary element outside the form, and moving it afterwards: Still slow
• Hiding the form while appending elements: Still slow
• Removing name attributes on the input elements before cloning/copying/whatever: Still slow
• Removing the attributes on the form itself: Still slow
• Using plain numbering instead of list-style naming (i.e. "nameX" instead of "name[]"): Still slow

So, again, as long as you're appending those select inputs to a form element, it'll be slow.

But as Rick suggested, you can append the inputs to an element outside the form, and use JS to serialize and submit them.

Alternatively, you can append input type="hidden" elements to the form (which is fast) to the form, while appending the actual select elements to something outside the form. Then you could conceivably use event listeners to make the hidden inputs mirror the values of the selects. The hidden inputs will be submitted with the form, while the selects just function as a user interface.

Another option would be to have the dropdowns in the markup to begin with (which I suspect the browser would render fast), but having them be disabled and hidden. Then use javascript to unhide and enable the dropdowns when needed. I don't know if this will cause a slowdown too, but since new elements aren't being appended, it should be faster.

Still doesn't explain the slowness (or why it's apparently fast in FF6)