html之CSS 子选择器性能与类膨胀

kenshinobiy 阅读:890 2023-11-05 18:46:41 评论:0

我正在努力学习编写更高效的 CSS,特别是当我处理一个需要快速呈现的相当复杂的网站时。

我已经习惯了在我的 HTML/CSS 中有很多这样的东西(主要是因为我喜欢可读性):

.spotlight {} 
.spotlight ul {} 
.spotlight ul li {} 
.spotlight ul li a {color: #333;} 
 
<div class="spotlight"> 
  <ul> 
    <li><a href="">link</a></li> 
    <li><a href="">link</a></li> 
    <li><a href="">link</a></li> 
  </ul> 
</div> 

我现在明白浏览器从右到左运行 CSS 规则匹配过程,这意味着 <a>上面最后一个 CSS 规则中的元素将首先匹配页面上的每个链接,从而导致性能损失。

因此,据我所知,浏览器友好的解决方案将更加具体,并使用,例如:

.spotlight {} 
.spotlight-link {color: #333;} 
 
    <div class="spotlight"> 
      <ul> 
        <li><a class="spotlight-link" href="">link</a></li> 
        <li><a class="spotlight-link" href="">link</a></li> 
        <li><a class="spotlight-link" href="">link</a></li> 
      </ul> 
    </div> 

(假设我在可能的情况下使用继承,但通常仍需要对树下的最后一个元素进行特定控制)

让我怀疑的是:在整个页面的元素上打印类名所导致的所有额外 HTML 膨胀是否抵消了避免嵌套 CSS 子选择器所带来的性能提升?我习惯于尝试编写更少的 HTML,而这与它背道而驰。任何见解将不胜感激。

请您参考如下方法:

你必须权衡一下。为每个 anchor 添加一个类是荒谬的,HTML 中的额外膨胀将大大抵消节省的渲染时间(这将是蜜蜂腿的 1/10,000)。更不用说您的代码有多难维护了。

例如,您只需要停止使用不必要的昂贵选择器

.spotlight ul li a 

可以写成

.spotlight a 

如果您继续在 HTML 中的相同元素上指定单个类(如您的第二个示例),您最好改用标签选择器。

您还必须权衡您的时间与浏览器的时间。在每次页面加载时节省几纳秒会花费多少时间?老实说,这不是真的值得的。

此外,让您的 CSS 结构与您的 HTML 结构相匹配会否定 CSS 的意义 - 如果 HTML 发生变化,您需要更改您的 CSS。所以您总是希望您的选择器尽可能不具体。

但这里没有正确或错误的答案。


标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们