html5 标记或 div 以提高性能

Question

使用 HTML5 标签，这些是新的，更适合 SEO，结构良好 调试。

自从我知道这些标签以来，我一直在尽可能多地使用 HTML5 标签。在我的网站中，我几乎使用了标签。除此之外，我使用更多的 CSS 规则（例如子选择器、后代）来最小化标签和 div 的使用。

我一直假设 - 更少使用 div 会最大限度地减少代码并提高性能

但在关注性能时，我发现（从最快到最低）

1. id 选择器 (#myid)

2. 类选择器 (.myclassname)

3. 标签选择器 (div,h1,p)

4. 邻居选择器 (h1+p)

5. 子选择器（ul>li）

6. 后代选择器 (li a)

7. 星号选择器 (*)

8. 属性选择器（a[rel="external"]）

9. 伪类选择器（a:hover,li:nth-child）

事实上，性能和速度比 SEO 和编码可读性更重要。

让我们忽略 SEO，我正在开发基于 Web 的软件，不需要 SEO。实际上，如果我以结构良好的方式进行编码会更好，

我知道调试对我来说很容易，但如果它的使用会影响性能，那么为什么要使用大量的 CSS 规则、选择、新的 HTML5 标记、新趋势？只需为每个元素分配 id 和 class你需要。

例如，我必须选择包含文本 Here you go 的元素。

我在我的项目中做什么

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

哪个更快更好？

根据我的项目选择或者选择直接分配单id#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>

参考文献

Would it be faster to use a CSS Child Selector?

Is CSS faster when you are specific?

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>

但是不建议仅使用 ID，因为这可能会在项目后期导致大量冲突。
所以我会推荐类似的东西：

<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>