Преимущества .insertAdjacentHTML против альтернатив?

Question

Каковы преимущества использования метода .insertAdjacentHTML по сравнению с .innerHTML? Есть ли веские причины для использования .innerHTML вместо .insertAdjacentHTML? У кого лучшая производительность? Как работает .innerHTML? Каковы другие альтернативы?

Answer 1

Есть несколько преимуществ .insertAdjacentHTML имеет более .innerHTML. Первым из них является производительность. В проведенном контрольном испытании .innerHTML добавили чуть более 200 твитов Twitter за пять секунд. insertAdjacentHTML, с другой стороны, добавили почти 30 000 в тот же временной интервал. Чем больше данных нужно было добавить, тем хуже .innerHTML. Обратите внимание, однако, в этом случае данные были добавлены с использованием .innerHTML +=.

Еще одно преимущество - контроль. .insertAdjacentHTML предоставляет вам контроль над тем, где вы хотите добавить данные, а `.innerHTML - нет.

Окончательное преимущество .insertAdjacentHTML - это не повреждает DOM. Вот как работает .innerHTML +=.

1. Он получает значение .innerHTML по сериализации потомков элемента.
2. Он добавляет правую сторону + = к строке.
3. Он удаляет детей элемента.
4. Он анализирует новую строку, что содержит сериализацию старых потомков, а затем некоторую новую разметку. Очевидно, что последнее преимущество не применяется в случае использования .innerHTML =.

Других альтернативы .innerHTML являются .insertBefore методом, который, как предполагает его название вставляет узел в качестве дочернего до другого узла, а также .appendChild метод, который вставляет дочерний узел в качестве последнего узла.

.insertAdjacentHTML что-то из многофункционального инструмента, видя, как он может выполнять работу по .innerHTML, .insertBefore, а также .appendChild.

Источники: https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/