0

在网上阅读有关 CSS 性能的信息时,我经常会发现哪些选择器比其他选择器更有效。例如:

http://css-tricks.com/efficiently-rendering-css/

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

我的问题是,使用需要双选择器的选择器时性能如何,例如:

.class-one.class-two {
}

如果我们将这些选择器放在上面的性能列表中,它们会在哪里?

4

3 回答 3

1

你不应该对此如此偏执。更重要的是要有一个好的和干净的代码,避免黑客攻击。但有一些基本规则:

#main-navigation {   }      /* Never style ID's directly, use classes instead*/
body.home #page-wrap {   }  /* If you ever have to style ID's, do it directly, they are unique and doesn't need any selector. You're just wasting bytes */
.main-navigation {   }      /* No problem at all, but try to be more abstract. a class should not be so specific, try to reuse code as much as you can.*/
ul li a.current {   }       /* You should optimize this, you could use just ul .current. Try to use as little selectors as you can, it'll have good performance and will be easier to deal with. Try to use just 3 selectors at the max, so you''l have a good performance and clean code. */
ul {   }                    /* No problem here */
* {   }                     /* You'll won't have any serious problem if you use with caution. Properties like border-box are a good use of it. Anything that you have to set globally in your stylesheet is welcome to use it. */
#content [title='home']     /* Same as *. Don't overdo and you're good to go. */

更重要的是尽可能拥有更简洁的代码。尽量避免过多的覆盖、未使用的代码、过多的选择器、重复的代码和黑客攻击。一件好事是使用OOCSSBEM。如果您使用框架,请尝试使用像inuit.css这样坚持良好实践的东西。

请记住,即使是智能手机今天也非常强大,只要您不过度使用大量动画、未优化的代码、大量 javascript,您应该没有真正的问题。

Ps.:如果您使用动画,请坚持使用 CSS3 过渡和动画,因为它们很有可能会被 GPU 加速并获得更好的性能。

于 2013-09-17T13:59:58.437 回答
0

除了“编写高效的 CSS”Mozilla 文章之外,您可能还对 Google 员工http://www.youtube.com/watch?v=a2_6bGNZ7bA的演讲“Faster HTML and CSS: Layout Engine Internals for Web Developers”感兴趣

通常,浏览器从右到左读取每个选择器,然后“计算”它是否适用于当前 DOM 节点。这就是为什么选择器以标签或大量级联结尾会导致性能问题,尤其是在动态重新渲染的页面上。

如果遵循关于独立CSS 块的BEM CSS 建议,则可以避免这种情况。http://bem.info/method/definitions/#IndependentCSS

于 2013-10-27T19:28:13.573 回答