Почему innerHTML = "" медленный в Firefox

Question

Я тестирую скорость различных методов для динамического добавления html-элементов в DOM. Я построил тестер здесь (код - рабочая версия, поэтому довольно небрежно). Результаты (очень) различны для разных браузеров: Chrome набирает все баллы за скорость, а Opera - хорошую секунду, но здесь вопрос не в этом.

В Firefox я обнаружил проблему с очисткой div (из его дочерних узлов). Когда добавляется около 50.000 элементов div, для очистки требуется всего лишь

[div].innerHTML = "";

Что здесь происходит? Для этого Firefox реализовал какой-то собственный метод сбора мусора?

Answer 1

Хотя я не уверен насчет innerHTML = "", вы пропустили один, возможно, быстрый подход, используя DocumentFragments для вставки в DOM: Как показывает Джон Резиг .

Как уже упоминал Олафур Вааге, несмотря на то, что innerHTML быстрее во многих ситуациях, поскольку он не является частью какого-либо стандарта W3C , причуды гораздо более вероятны, чем если бы они были. Не сказать, что innerHTML не является стандартом де-факто в современных браузерах.

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

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

Answer 2

innerHTML не является частью спецификации W3C DOM.

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

Поскольку для этого свойства нет общедоступной спецификации, реализации сильно различаются. Например, когда текст вводится в текстовый ввод, IE изменяет атрибут значения свойства innerHTML ввода, но браузеры Gecko этого не делают.

Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript , предлагающих сериализовать или анализировать XML для установки содержимого элемента, определенного как строка (и) через DOM, или получения содержимого элемента, полученного из DOM в виде строки.

Источник - Mozilla Dev