Как insertAdjacentHTML намного быстрее, чем innerHTML?

Question

Около месяца назад , Firefox 8 реализовал метод insertAdjacentHTML, который был добавлен в IE4 вместе с innerHTML. Согласно этому тесту, insertAdjacentHTML обычно на порядок быстрее, чем innerHTML.

Я предполагаю, что оба вызывают один и тот же HTML-парсер, так почему же разница настолько существенна? insertAdjacentHTML - это простой вызов метода, тогда как innerHTML - это метод получения / установки, и для этого, вероятно, есть некоторые накладные расходы, но я бы никогда не подумал, что так много.

Answer 1

work.innerHTML += "<span>test</span>"; эквивалентно work.innerHTML = work.innerHTML + "<span>test</span>";, т. Е. Каждый раз, когда он запускается, он должен сериализовать все существующее содержимое work, а затем повторно анализировать весь лот плюс дополнительный диапазон.

work.insertAdjacentHTML("BeforeEnd", "<span>test</span>"); анализирует только один интервал каждый раз, а затем присоединяет небольшой фрагмент документа к DOM.

Answer 2

Установщик innerHTML должен будет удалить все существующие дочерние узлы перед добавлением новых.

Не знаю, является ли это единственной причиной, но это, безусловно, фактор.