Производительность тегов HTML

200

08 апреля 2022, 11:20

Есть ли разница в производительности между тегами?
Например у меня (образно) 10000 слов данных, каждое слово нужно обернуть в тег
Влияет ли выбор тега на производительность, если стили одинаковые?

<ul class="list">
    <li class="item">some item</li>
    <li class="item">some item</li>
    <li class="item">some item</li>
</ul>

<div class="list">
    <div class="item">some item</div>
    <div class="item">some item</div>
    <div class="item">some item</div>
</div>

(Вопрос не конкретно про эти (div, li) теги, а про теги вообще)

Answer 1

Для браузера это всего лишь нет никакой разницы в том каким тегом обернуто слово, или что-либо другое.

На производительность будет влиять само количество этих тегов. Google Chrome рекомендует на одной странице использовать не более 1500 тегов в идеальном случае и не более 3000 в худшем случае. Если на странице больше 3000 тегов - уже будет ругаться Google Page Insights.

По большей части на производительность влияет css. Желательно не делать много селекторов, и не создавать специфичных селекторов. Так же нужно иметь введу то, что анимации css тоже сильно грузят страницу. Об производительности css можно почитать здесь.

Ну и основное, что грузит страницу - это JavaScript.

Так же не стоит никогда заниматься преждевременной оптимизацией.