Каков более эффективный способ удаления всех дочерних элементов элемента HTML?

Question

Я знаю, что доступ к DOM и управление им могут быть очень дорогостоящими, поэтому я хочу сделать это максимально эффективно. Моя ситуация такова, что определенный div всегда будет содержать список элементов, однако иногда я хочу обновить этот список совершенно другим набором элементов. В этом случае я могу создать новый список и добавить его в этот div, но мне также нужно очистить этот список. Какой лучший способ? Установить innerHTML для пустой строки? Перебрать дочерние узлы и вызвать "removeChild"? Что-то еще?

Answer 1

Посмотрите на QuirksMode . Это может занять некоторое копание, но есть время для этой операции в разных браузерах. Хотя тесты были проведены более года назад, установка innerHTML на "" была самой быстрой в большинстве браузеров.

P.S. здесь это страница.

Answer 2

Я бы порекомендовал протестировать пару реализаций в браузерах, которые вас интересуют. Разные движки Javascript имеют разные характеристики производительности, а разные методы манипуляции DOM имеют разную производительность на разных движках. Остерегайтесь преждевременной оптимизации и остерегайтесь различий в браузерах.

Answer 3

Акцент на может быть дорогостоящим. Это не всегда дорого; фактически, имея дело с небольшим количеством элементов, это может быть тривиальным. Помните, что оптимизацию всегда следует выполнять в последнюю очередь, и только после того, как у вас появятся убедительные доказательства того, что конкретный аспект, который вы хотите улучшить, действительно является вашим узким местом в производительности.

Я рекомендую по возможности избегать хакерства с innerHTML; легко запутаться и сделать что-то неприятное с DOM, от которого невозможно вылечиться столь же изящно.

Этот метод довольно быстр для 99,9% случаев, если только вы не удаляете массивные фрагменты иерархии из DOM:

while(ele.childNodes.length > 0) {
    ele.removeChild(ele.childNodes[ele.childNodes.length - 1])
}

Answer 4

установить innerHTML в пустую строку.