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

Question

Каковы лучшие практики для вставки DOM?

• Быстрее ли вставлять большие куски html vs элемента за раз в цикл?
• Имеет ли значение, какой HTML-код вы вставляете, или только насколько велик кусок?
• Быстрее ли вставлять таблицу против вставки только строк с помощью таблицы взломать?

Answer 1

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

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

Answer 2

вставка innerHTML незначительно быстрее, чем манипулирование DOM 1: 1, и выигрывает в тех случаях, когда вы фактически вставляете несколько узлов, атрибутов и т. Д., Но это более подвержено ошибкам и опасно, поскольку по сути это скрытый оператор eval. 1001 *

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

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

Answer 3

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

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

Answer 4

Определенно быстрее сделать все сразу. Также посмотрите блог Стива Соудера и его книгу .

Answer 5

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