Самая быстрая вставка DOM

Каковы наилучшие методы для ввода DOM?

  • Быстрее ли вставлять большие куски html vs element за один раз в цикле?
  • Неважно, какой html вы вставляете, или только, насколько большой кусок?
  • Это быстрее вставить таблицу, vs вставляя только строки с помощью таблицы hack?

Ответы

Ответ 1

innerHTML Вставка немного быстрее, чем DOM-манипуляция 1:1, и получает больше для случаев, когда вы фактически вставляете несколько узлов и атрибутов и т.д., но это больше подвержено ошибкам и опасностям, учитывая, что это по сути сводная инструкция в маскировке.

По моему опыту, в наши дни JS настолько быстр, что выигрыш в скорости innerHTML не оправдывает риски ни для чего, кроме самой большой из серий вставки/итерации.

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

Ответ 2

Настройка innerHTML часто быстрее, чем вставка отдельных узлов.

Другая возможность заключалась бы в создании DocumentFragment, который позволяет вставлять узлы все сразу. Еще одно преимущество использования DocumentFragments заключается в том, что они могут легко быть клонированы, что может заменить множество вариантов использования для innerHTML и потенциально быстрее, чем нет используется разбор.

Ответ 3

innerHTML на самом деле медленнее, а затем во многих случаях направляет DOM-манипуляцию. проверьте тест на jsperf

Нет "правильного ответа", вам нужно будет найти правильный, наиболее эффективный метод для вашего конкретного случая использования

Ответ 4

Для больших фрагментов html, определенно быстрее назначить текст innerHTML. Хотя он поддерживается всем основным браузером, innerHTML не входит в стандарт w3c, поэтому некоторые программисты не решаются его использовать.