Я читал, что javascript получает значительные преимущества в производительности от модификации off-dom. Ранее сегодня я читал документацию клона:

«Обратите внимание, что при использовании метода .clone () мы можем изменить клонированные элементы или их содержимое перед (повторной) вставкой их в документ».

Значит ли это, что, если у меня есть 1000 LI и я хочу внести изменения во все из них, самый эффективный метод - это клонировать его, модифицировать клон, уничтожить оригинал и поместить клон?

Как бы вы сделали эту модификацию наиболее эффективным способом?

3
Matrym 25 Июн 2010 в 23:41

3 ответа

Лучший ответ

Метод detach () - это метод, разработанный именно для того, что вы пытаетесь сделать:

http://api.jquery.com/detach/

Изменить: Стоит отметить, что каждый проводит свое собственное профилирование / тесты, что является хорошим советом здравого смысла. Кроме того, интересно наблюдать, как вы получите смешную прирост производительности. :)

Мое эмпирическое правило таково: если вы выполняете манипуляции со многими элементами, которые включают добавление, удаление или перемещение элементов, вы должны обязательно использовать .detach (), если вы делаете что-то вроде addClass, не используйте detach.

Если вы не уверены в конкретных манипуляциях или о том, сколько из них квалифицируется как «многие», вам следует запустить тест.

Вот простое сравнение, которое я сделал в дебатах этого вопроса: http://jsbin.com/uwode3/5 vs http://jsbin.com/uwode3/4

3
Mark 25 Июн 2010 в 23:08

Есть еще один эффективный метод: .detach() их из дерева, измените, а затем снова вставьте .
Однако, если вы изменяете только свойства объектов DOM и не читаете их, вам все равно не следует запускать перекомпоновку (что является медленной операцией), по крайней мере, в Firefox (из того, что я прочитал). Хотя отсоединение их, а затем повторное подключение гарантирует, что существует не более двух оплавлений.

2
Mewp 25 Июн 2010 в 19:50

Фактически, подразумевается, что было бы более эффективно модифицировать клонированные элементы перед вставкой их в DOM, чем вставлять клонированные элементы в документ и затем изменять их . То, будет ли clone-modify-replace более эффективным, чем простое изменение элементов на месте, скорее всего, будет зависеть от лота от того, какие модификации вы намереваетесь внести ... Как всегда, профилирует ваш код , а затем выберите вариант, который наилучшим образом соответствует вашим потребностям на основе реальных данных.

... И пока вы это делаете ... Вы можете "отсоединить" элемент DOM напрямую: просто позвоните removeChild() (или, поскольку вы используете jQuery, enjveXX1}}) - элемент будет существовать до тех пор, пока вы сохраняете ссылку на него, и его можно повторно -вставляется после того, как вы закончите вносить изменения.

... О, и независимо от того, какую технику вы в конечном итоге используете, вы почти наверняка увидите лучшие результаты при удалении родительского UL, чем при удалении каждого из 1K дочерних элементов LI, по одному за раз ...

7
Community 23 Май 2017 в 12:19