Mar*_*ean 5 html css performance dom
我知道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>元素？
总是想知道这一点.思考？
我认为您展示的 MDN 文章是以有害的方式编写的，因为它建议关注 CSS 微优化，而几乎总是可以通过不同方式提高页面速度（例如，Google Page Speed有有趣的提示）。
我不记得我的网站中有任何 CSS 成为瓶颈的情况。您可能希望在 Chrome 开发者工具的某些页面上看到“时间轴”，并注意到与其他事件相比，处理样式所花费的时间通常微不足道。
如果要我给出建议，我宁愿走另一条路，使用SASS或LESS等 CSS 预处理工具来提高可维护性。这甚至可能最终有助于减少规则数量。