Question

我正在尝试在一个页面中找到一些简单的客户端性能调整，这些页面可以获得数百万的每月页面浏览量。我有一个问题是使用CSS通用选择器（*）。

举个例子，考虑一个非常简单的HTML文档，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Example</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

通用选择器会将上述声明应用于body，h1和p元素，因为这些是文档中唯一的元素。

一般来说，我会从以下规则中看到更好的表现：

body, h1, p {
  margin: 0;
  padding: 0;
}

或者这会产生完全相同的净效应吗？

通用选择器是否执行了我可能不知道的更多工作？

我意识到这个例子中的性能影响可能非常小，但我希望能够学到一些可能会在实际情况中带来更显着性能改进的东西。

我不打算在文档的后面用其他样式覆盖通用选择器规则中的样式 - 即，将它用作快速和脏的重置样式表。我实际上正在尝试完全按照我的意图使用通用选择器 - 将规则集应用于文档中的所有元素，一劳永逸。

最终，我希望确定通用选择器是否存在某种内在缓慢的问题，或者是否由于滥用滥用而导致说话不好。如果* { margin: 0; }字面上等同于body, h1, p { margin: 0; }，那么这将回答我的问题，我会知道与前者相关，因为它更简洁。如果没有，我想了解为什么通用选择器执行得更慢。

Answer 1

在现代浏览器中，如果不对每个元素应用慢速效果（例如，盒阴影，z轴旋转），则性能影响可以忽略不计。通用选择器速度慢的神话是十年前很慢的宿醉。

参考：http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx

Answer 2

避免使用通用选择器将始终加快页面呈现速度。通配符*很慢，特别是当您的页面变成复杂的嵌套并且您的元素数量猛增时。

您应该始终将ID指定到您可能的最低级别（我意识到这几乎是不可能的，尤其是在处理数据库结果等事情时）。但是当你使用像

这样的选择器时

.mysuperclass ul li p a

你有一个类后跟四个泛型选择器 - 这意味着对于.mysuperclass的每个元素，渲染引擎必须遍历该父级中寻找这些规则的每个元素。

简而言之，我的答案是尽可能使用您的CSS，并尽可能深入了解您的选择器进入DOM。避免使用通配符和泛型。

Answer 3

我知道通配符会影响性能，但在较小的网站上，影响可以忽略不计。通配符是基于渐进增强功能构建网站的非常有用的工具。显然，使用 HTML * 之类的内容确实会影响较大网站的效果，但是使其更具体，例如 #element_id * ，有助于快速对子元素进行全面更改

毕竟，通配符是有原因的。您只需了解何时使用它将比不使用它更有益。这取决于具体情况。

我在制作CSS模板时使用通配符和通用选择器。这也是使用自定义样式快速调整不熟悉的WordPress主题中的一系列元素的好方法。

即使是受欢迎且简化的Bootstrap，在适当的情况下也会使用通配符。

参考文献：

http://getbootstrap.com/css/
Gustafson，A。2015.自适应网页设计：通过渐进增强来创造丰富的经验。伯克利，（加利福尼亚州）：新骑手。

通用选择器的性能影响是什么？

3 个答案: