(为什么)被认为是有害的CSS星形select器?
CSS中的星形select器会影响页面的渲染性能吗?
有没有使用它的警告?
* { margin:0; padding:0; }
谈到表演,史蒂夫·苏德斯(Steve Souders)是这样一个人:
- 对CSSselect器的性能影响
- 简化CSSselect器
其中一份报告无耻地引述:
优化CSSselect器的关键是把重点放在最右边的select器 ,也称为键select器(巧合?)。 这是一个非常昂贵的select器:A.class0007 * {}。 虽然这个select器看起来可能更简单,但浏览器的匹配成本更高。 由于浏览器从右向左移动 ,因此首先检查与键select符“*”匹配的所有元素。 这意味着浏览器必须尝试将此select器与页面中的所有元素进行匹配。
[大胆强调我的]
对于一些使用*
属性可能产生意想不到的结
* { color: blue } li { color: red }
现在给定<li><i>text</i></li>
,文本将是蓝色的!
有一种观点认为,性能问题并不是那么重要,而是一个很好的老习惯 – 这是一个IE问题。 它影响IE 5,5.5和6以及Macintosh变种。 基本上,有一种叫做HTML星形select器的错误,如下所示:
* html
这应该被解释为没有元素匹配,因为HTML是根,不能是子元素。 IE将其解释为html。
* * body
同样,应该匹配到没有元素,因为身体不能成为孙子元素 – 即使它是HTML的子元素。 IE将此解释为* body。
* html body
这应该匹配没有元素,但IE解释为html身体。
性能方面通常认为应用*仅意味着该样式适用于页面中的每个元素。 我很less发现这本身就是一个问题 – 这个问题将成为一个问题,意味着你可能在这方面有太多的标记。 同样,它适用于所有事情,这意味着您需要增加代码来处理不应该有这种风格的元素。 和其他所有事情一样,由您来决定权衡应该是什么。
由于我在每个项目中都使用完全相同的规则,而且没有任何严重的性能问题,所以我会说:不,据我所知。