Много ли элементов DOM плохо влияет на производительность?

Question

Я делаю кнопку, которая выглядит следующим образом:

<!-- Container -->
<div>

<!-- Top -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Middle -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Bottom -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

</div>

В ней много элементов, потому что я хочу, чтобы она была скиновой, не ограничивая возможности скинеров.Тем не менее, я беспокоюсь о производительности.Много ли элементов DOM отражают плохую производительность?Очевидно, что влияние всегда будет, но насколько оно велико?

Обновление:

Контейнер div устанавливает свойства, такие как тень и граница для всей кнопки.Тогда у нас есть сетка 3х3, где каждый угол может иметь свое изображение, рамку и другие свойства CSS.И, наконец, у нас есть средняя часть, которая содержит текст и, возможно, некоторые другие стили, такие как отступы.

Скажем, я хочу иметь кнопку с box-shadow, 4 угловыми изображениями, 4 краями и центральным изображением, гдеизображения SVG и центр нуждается в заполнении.Как бы я достиг этого с меньшим количеством DIV?Моими целевыми браузерами являются браузеры HTML5.

Answer 1

Сложно ответить, потому что, очевидно, влияние будет различным в разных браузерах.

Однако для одной кнопки это лот элементов. Есть ли шанс урезать немного?

Что мне также трудно, так это то, что «суп супа» делает код чрезвычайно трудным для чтения и требует, чтобы каждый элемент получил класс для стилизации. Попробуйте найти более подходящие элементы, такие как

• <h1> <h2> ... для подписей и заголовков

• <ul> <li> ... для навигации и других списков

Также старайтесь по возможности работать со свойствами border и background-image, они почти наверняка уменьшат потребность в количестве используемых элементов. Я не могу вспомнить кнопку, для которой нужно столько элементов.

Answer 2

Лучше всего обрезать элементы и использовать семантический код (ul, li, span и т. Д.)

Но простой код не повлияет на производительность любого браузера. Конечно, когда это станет более сложным, это зависит от браузера. Обычно код javascript значительно увеличивает производительность (простые библиотеки, такие как jquery с сотнями тысяч строк), поэтому вам не нужно слишком беспокоиться о 2 или 3 дополнительных html-тегах ... просто ограничьте сценарии минимальным значением:)

Для современных браузеров, к сожалению, использование современных HTML / CSS означает, что вы откажетесь от IE6,7,8 пользователей ... или веб-сайт будет выглядеть плохо для них.

Answer 3

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

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

Я бы просто не стал выбрасывать такой мусорстраниц и сделать код трудным для чтения и, следовательно, трудно для стиля.