Javascript removeChild() и appendChild() VS display = none и display = block | inline

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

В этот момент я могу отображать и исчезать элементы управления, используя:

element.setAttribute("style", "display : inline");

element.setAttribute("style", "display : none");

но я думаю об использовании:

element.appendChild(childRef);

element.removeChild(childRef);

Итак, какой из них является лучшим решением с точки зрения скорости системы и элегантности кода? Или есть лучший способ сделать это?

Ответ 1

element.appendChild(childRef); и element.removeChild(childRef); оба браузера управляют деревом DOM, а изменение CSS просто изменяет один из атрибутов.

Итак, изменение CSS выполняется быстрее.

Dev Opera говорит

Когда элемент имеет свой стиль отображения, равный none, его не нужно перерисовывать, даже если его содержимое изменено, так как оно не отображается. Это может быть использовано в качестве преимущества. Если необходимо внести несколько изменений в элемент или его содержимое, и невозможно объединить эти изменения в одну перерисовку, элемент может быть установлен для отображения: none, изменения могут быть сделаны, тогда элемент может быть установлен вернуться к нормальному дисплею.

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

Еще одна соответствующая статья объясняет reflow и repaint

Ответ 2

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

Я знаю, что appendChild/removeChild должны хорошо поддерживаться в IE, но иногда на моем IE7 все еще происходит перемещение вещей после добавления нового элемента (это только мой личный опыт).

Что касается способа изменения свойств отображения, я бы просто сделал более простой и кросс-браузер (setAttribute не поддерживается IE6/7, а также IE8 в режиме IE7):

element.style.display = 'none'; //for hiding an element
element.style.display = ''; //for showing that element again using its default way of displaying

Отображение элемента с помощью display = 'inline' неверно, потому что по умолчанию элемент может иметь отображаемый блок, показывающий как теги DIV, и вы меняете способ показа встроенной строки не верны и могут привести к тому, что элементы вашей страницы будут перемещаться из мест, которые вы ожидаете от них.

Ответ 3

Я сомневаюсь, что там так или иначе, и даже если есть, я уверен, что это зависит от реализации (IE против Chrome против Firefox против...). Оба будут вызывать события reflow в дереве.

Показ и скрытие просты и понятны. Добавление и удаление может иметь свои применения, но по большей части, вероятно, перебор. Во-первых, вам нужно сохранить ссылку на нее, чтобы потом добавить ее позже, и вы должны помнить, где вам нужно добавить ее обратно.

Но (и это немного не по теме) ваш механизм для показа и скрытия имеет некоторые проблемы:

С вашим примером кода все может быть inline, а не inline-block или block, что будет несколько... ограничивающим.
Ваш код также полностью заменяет информацию о стилях элемента (и может не работать над IE, см. комментарий Дэвида по вашему вопросу), поэтому все другие стили, непосредственно примененные к элементу, будут удалены; рассмотрите вместо этого свойство style элемента: childRef.style.display = 'none"; и childRef.style.display = "inline"; (или block, или...). Таким образом, вы не делаете никаких других стилей в элементе.

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

Ответ 4

Небольшое отступление: если вы сталкиваетесь с пользовательскими редактируемыми элементами в IE (т.е. внутри документа с designMode "on" или внутри элемента с contenteditable true), устанавливая свойство CSS display none не будет иметь никакого эффекта, и вам нужно будет удалить элементы из DOM, чтобы скрыть их.

Ответ 5

Первый подход лучше, я думаю, что он просто скрывает и отображает, но не удаляет из DOM и снова добавляет.

Ответ 6

Я бы подумал, что производительность лучше всего обновить стиль.

Ответ будет зависеть от того, для чего вы используете элементы. Если очень динамично, следует ли показывать их или нет, это может быть решение для добавления/удаления из DOM, но если есть статический набор элементов, может быть проще установить стиль. Устанавливая стиль, вы также имеете больший контроль над положением в документе. Добавляя/удаляя из DOM, вы должны быть уверены, что он добавлен в нужном месте.

Примечание:
Вместо element.setAttribute("style", "display:none"); вы можете использовать element.style.display= "none"; Если вы используете первый подход, вы удалите любые другие настройки стиля для элемента.

Ответ 7

Я думаю, что редактирование стиля элемента будет быстрее, но лучше скрыть элемент или удалить его из dom, это зависит от ваших потребностей, если вам нужно просто скрыть элемент или удалить его.
Может быть, вам не нужно, чтобы пользователь увидел элемент, но вам нужно сделать некоторую js-логику, поэтому скрыть здесь будет лучше.