Question

我知道ID规则比类规则更快，类规则比标记规则更快，标记规则比通用规则更快，如MDN所述。我的问题涉及继承方面的CSS性能。例如，以下哪项更有效？

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
}

或

h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
}

.article-text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}

虽然DOM中只有一个<body>标记，但可能有数百个p.article-text个元素。由于只有一个<body>标记，这是否意味着<body>样式效率更高，即使我要重新设置<h1>元素？或者设置.article-text元素的样式是否更有效，因为这样做会使用更具体的选择器，我不需要担心重新定位<h1>元素？

总是想知道这一点。想法？

Answer 1

我认为您展示的MDN文章是以有害的方式编写的，因为它建议专注于CSS微优化，而几乎总是以不同的方式增加页面速度（例如。Google Page Speed有一些有趣的提示）。

我记不起我的网站中CSS是瓶颈的任何情况。您可能希望在某些页面上看到Chrome开发者工具中的“时间轴”，并注意到与其他事件相比，使用样式所花费的时间通常无关紧要。

如果我要提供建议，我宁愿采用其他方式使用CSS预处理工具，例如SASS或LESS，以提高可维护性。这甚至可能最终有助于减少规则数量。

Answer 2

如史蒂夫斯提到的那样。这不值得担心。而且，答案实际上取决于浏览器和实际给出的HTML。

Answer 3

我想说最好的一个可能更快从两个，但是像每个人都说过我们有ATM的ATM和设备和连接速度你不会注意到差异，除非你有一个超过一个巨大的网站40 - 50页，你应该看看你的代码苗条衬里

关于继承的CSS性能

3 个答案: