通用选择器对性能有何影响？

小编典典

通用选择器对性能有何影响？

html

我试图在接收每月数百万次页面浏览量的页面中找到一些简单的客户端性能调整。我关心的一个问题是使用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; }，那么这将回答我的问题，并且我会选择前者，因为它更加简洁。如果不是，我想了解为什么通用选择器的执行速度较慢。

阅读 360

2020-05-10

共1个答案

小编典典

在现代浏览器中，只要不对每个元素都应用慢效果（例如，框阴影，z轴旋转），对性能的影响就可以忽略不计。通用选择器运行缓慢的神话是十年前缓慢运行时的宿醉。

2020-05-10