jQuery Clone Performance

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

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