CSS子选择器性能与类别膨胀 [英] CSS child selector performance vs. class bloat

问题描述

我想学会写更高效的CSS，特别是因为我正在使用一个相当复杂的网站，需要快速渲染。

以前在我的HTML / CSS中有很多这样的东西（主要是因为我喜欢可读性）：

  .spotlight {} 
 .spotlight ul {} 
 .spotlight ul li {} 
 .spotlight ul li a {color：＃333;} 
 
< div class =spotlight > 
< ul> 
< li>< a href =>链接< / a>< / li> 
< li>< a href =>链接< / a>< / li> 
< li>< a href =>链接< / a>< / li> 
< / ul> 
< / div> 
  

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

所以从我收集的，浏览器友好的解决方案将更具体，并使用，例如：

 。 spotlight {} 
 .spotlight-link {color：＃333;} 
 
< div class =spotlight> 
< ul> 
< li>< a class =spotlight-linkhref => link< / a>< / li> 
< li>< a class =spotlight-linkhref => link< / a>< / li> 
< li>< a class =spotlight-linkhref => link< / a>< / li> 
< / ul> 
< / div> 
  

（假设我尽可能地使用继承，但通常仍然需要特定控制最后一个元素树）

引起我怀疑的是：不是所有的额外的HTML膨胀打印类名称的元素在整个页面否定避免嵌套的CSS孩子的性能增益选择器？我习惯于试图写较少的HTML，这种反对它。

解决方案

你必须权衡它。向每个锚点添加类是可笑的，HTML中的额外膨胀将大大抵消渲染时间节省（这是蜜蜂腿的1 / 10,000）。

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

  .spotlight ul li a 
  

$ b b

可写成

  .spotlight a 
  

如果你继续在HTML中的相同元素上指定一个类（例如第二个示例），那么最好使用标签选择器。 / p>

您还必须权衡您的时间与浏览器时间。在每个页面加载时节省几个纳秒，您的时间需要多少费用？

另外，让你的CSS结构与你的HTML结构相匹配，否定CSS的点 - 如果HTML更改，您需要更改您的CSS。

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

$

b $ b

I'm trying to learn to write more efficient CSS, particularly as I'm working with a fairly complex site that needs to render fast.

I'm used to having a lot of this in my HTML/CSS (mainly because I like the readability):

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

I now understand that browsers run the CSS rule matching process from right to left, meaning that the <a> element in the last CSS rule above would first match every link on the page, leading to performance loss.

So from what I gather, the browser-friendly solution would be to be more specific, and use, for example:

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

(assuming I'm using inheritance where possible but often still need specific control over the last element down the tree)

What is causing me doubt is: doesn't all the extra HTML bloat from printing class names on elements throughout the page negate performance gains made from avoiding nested CSS child selectors? I'm used to trying to write less HTML and this sort of goes against it. Any insight would be appreciated.

解决方案

You have to weigh it up. Adding a class to every anchor is ridiculous, the extra bloat in the HTML would massively offset the rendering time saved (which would be 1/10,000th of a bee's leg). Not to mention how hard your code would be to maintain.

You just need to stop using unnecessarily expensive selectors, for example

.spotlight ul li a

Can be written as

.spotlight a

If you keep on specifying a single class on the same elements in your HTML (like your second example), you'd probably be better off using a tag selector instead.

You also have to weigh up your time vs the browsers time. How much is it going to cost in your time to save a few nanoseconds on each page load? In all honestly, it's not really worth it.

Also, making your CSS structure match your HTML structure negates the point of CSS - if the HTML changes, you need to change your CSS. So you always want your selectors to be as unspecific as possible.

But there is no right or wrong answer here.

这篇关于CSS子选择器性能与类别膨胀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！