Почему clone () слишком медленный, если элементы находятся внутри <form>? - PullRequest
Новая
       12

Почему clone () слишком медленный, если элементы находятся внутри <form>?

5 голосов
/ 28 августа 2011

Здесь вы можете найти весь пример. Нажав на Нажмите, чтобы добавить , вы 100 раз клонируете элемент trackOn; тогда он будет добавлен в таблицу tracklistOn.

К сожалению, если эти элементы находятся внутри form, вы можете видеть, что время очень велико до завершения процесса. Если я удалю форму, это будет немедленно. Почему это поведение?

Весь код здесь:

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'));
    }
});

Как я могу решить эту проблему?

EDIT

Пробовал на Firefox 6.0, и проблемы исчезли: O Только старая версия и chrome + IE? Почему?

Ответы [ 2 ]

4 голосов
/ 29 августа 2011

В документации четко указано следующее:

Метод .clone () выполняет глубокое копирование набора сопоставленных элементов, то есть копирует сопоставленные элементы кака также все их дочерние элементы и текстовые узлы.При использовании в сочетании с одним из методов вставки .clone () является удобным способом дублирования элементов на странице

Зная это, было бы разумно ограничить объем глубокого обхода, ожидаемого для.clone().

Эта проблема совершенно не связана с jQuery, как показано здесь , где я обменял ваш код с кодом API хоста, и проблема с производительностью все еще существует.

Наконец, я смог определить еще один «обходной путь» к этой проблеме, который заставил бы нас поверить, что проблема также заключается в добавлении новых узлов, взгляните и вы 'Вы увидите, что перемещение элемента назначения из формы также значительно повышает производительность.

1 голос
/ 31 августа 2011

Это просто для того, чтобы конкретизировать мой комментарий ранее и повторить то, что сказал Рик.

Я пробовал следующее (в Safari):

  • Использование простого javascript (без jQuery): Все еще медленно
  • Использование div вместо таблиц: Все еще медленно
  • Использование innerHTML вместо .clone() / cloneNode(): Все еще медленно
  • Перемещение шаблона из формы: Все еще медленно
  • Создание элементов с нуля вместо клонирования: Все еще медленно
  • Добавление всего к временному элементу вне формы и последующее его перемещение: Все еще медленно
  • Скрытие формы при добавлении элементов: Все еще медленно
  • Удаление атрибутов имени на элементах ввода перед клонированием / копированием / чем-либо еще: Все еще медленно
  • Удаление атрибутов в самой форме: Все еще медленно
  • Использование простой нумерации вместо именования в стиле списка (т.е. "nameX" вместо "name []"): Все еще медленно

Итак, опять же, пока вы добавляете эти select входные данные к элементу формы, это будет медленно.

Но, как предложил Рик, вы можете добавить входные данные к элементу вне формы и использовать JS для их сериализации и отправки.

Кроме того, вы можете добавлять input type="hidden" элементы к форме (что быстро) к форме, добавляя фактические select элементы к чему-то вне формы. Тогда вы можете использовать слушатели событий, чтобы скрытые входы отражали значения выбора. Скрытые входные данные будут отправлены вместе с формой, в то время как выбранные функции действуют как пользовательский интерфейс.

Другим вариантом было бы иметь выпадающие списки в разметке для начала (что, как я подозреваю, браузер рендерит быстро), но их отключение и скрытие. Затем используйте JavaScript, чтобы отобразить и включить раскрывающиеся списки при необходимости. Я не знаю, приведет ли это также к замедлению, но поскольку новые элементы не добавляются, это должно быть быстрее.

Все еще не объясняет медлительность (или почему она так быстро работает в FF6)

...