6

我知道 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;
}

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

一直在想这个。想法？

4

3 回答 3

2

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

我不记得在我的网站上出现过 CSS 是瓶颈的任何情况。您可能希望在某些页面上的 Chrome 开发人员工具中看到“时间轴”，并注意到花在处理样式上的时间与其他事件相比通常是微不足道的。

如果我要提供建议，我宁愿另辟蹊径，使用SASS或LESS等 CSS 预处理工具来提高可维护性。这甚至可能最终有助于减少规则的数量。

于 2013-10-02T10:15:25.020 回答
0

正如steveax所提到的。这不值得担心。此外，答案实际上取决于浏览器和实际给出的 HTML。

于 2013-07-20T18:52:21.240 回答
0

我会说顶部的可能在两者中更快，但是就像每个人所说的那样，我们有 ATM 和设备以及连接速度的浏览器你不会注意到差异，除非你有一个超过 40 - 50 个的大型网站页面是您应该研究精简代码的时候

于 2013-10-02T10:00:37.920 回答