тег html5 или div для производительности

Question

Используйте теги HTML5, они новые, лучше для SEO и хорошо структурированы для отладки.

Я использую теги HTML5 столько, сколько могу, так как знаю об этих тегах,На своих сайтах я использовал почти теги.Кроме того, я минимизировал использование тегов и элементов div, используя больше правил CSS, таких как дочерний селектор, потомок.

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

Но в то же время относительно производительности я обнаружил (от самого быстрого до самого низкого)

1. Селекторы id (#myid)

2. Селекторы класса (.myclassname)

3. тег селекторов (div, h1, p)

4. соседних селекторов (h1 + p)

5. дочерних селекторов (ul> li）

6. потомки селекторов (li a)

7. звездные селекторы (*)

8. свойство Selectors (a[rel = "external"])

9. Селекторы псевдокласса (a: hover, li: nth-child)

Infact, производительность и скорость важнее, чем SEO и читаемость кода.

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

Я знаю, что мне легко отлаживать,но если его использование снижает производительность, тогда зачем использовать обширные правила CSS, выбор, новые теги HTML5, новые тренды? Просто назначьте идентификатор и класс каждому элементу, который вам нужен.

Например, янужно выбрать элемент, содержащий текст Here you go.

Что я делаю в своем проекте

article section:nth-child(2) aside:nth-child(1) section

Что быстрее и лучше?

Выберите в соответствии с моим проектом или выберите прямое назначение одного идентификатора #section5

Первый способ

<article>
    <header>
    </header>
    <section>
        <aside>
            <section></section>
        </aside>
        <aside>
            <section></section>
        </aside>
    </section>
    <section>
        <aside>
            <section></section>
            <section>Here you go</section>
        </aside>
        <aside>
            <section></section>
        </aside>
    </section>
</article>

Второй способ

<div>
    <div id='header'>
    </header>
    <div id='section'>
        <div id='aside'>
            <div id='section1'></div>
        </div>
        <div id='aside1'>
            <div id='section2'></div>
        </div>
    </div>
    <div id='section3'>
        <div id='aside2'>
            <div id='section4></div>
            <div id='section5'>Here you go</div>
        </aside>
        <div id='aside3'>
            <div id='section6'></div>
        </div>
    </div>
</div>

Ссылки

Будет ли быстрее использовать CSS Child Selector?

Является ли CSS быстрее, если вы конкретны?

Answer 1

Второй способ будет быстрее говорить о спектаклях

<div>
    <div id='header'>
    </header>
    <div id='section'>
        <div id='aside'>
            <div id='section1'></div>
        </div>
        <div id='aside1'>
            <div id='section2'></div>
        </div>
    </div>
    <div id='section3'>
        <div id='aside2'>
            <div id='section4></div>
            <div id='section5'>Here you go</div>
        </aside>
        <div id='aside3'>
            <div id='section6'></div>
        </div>
    </div>
</div>

Однако использование только идентификаторов не рекомендуется , так как это может привести к множеству конфликтов позже во время вашего проекта.
Поэтому я бы порекомендовал что-токак:

<div>
    <header>
     <h1>This is your header</h1>
    </header>
    <div id='section1'>
        <aside>
            <div id='section1_part1'></div>
        </aside>
        <aside>
            <div id='section1_part2'></div>
        </aside>
    </div>
    <div id='section2'>
        <aside>
            <div id='section2_part1'></div>
            <div id='section2_part2'>Here you go</div>
        </aside>
        <aside>
            <div id='section3'></div>
        </aside>
    </div>
</div>