html标记上的多个类是否总是影响渲染性能?

html标记上的多个类是否总是影响渲染性能?,html,css,performance,dom,render,Html,Css,Performance,Dom,Render,在Chrome devtools中遇到了一个关于调试渲染性能的问题。在他的课程中,Umar将html标记上CSS类的更改确定为渲染瓶颈的来源。Devtools显示,更改此类可能会影响html下面DOM中的3874个元素,并触发昂贵的重新计算样式操作 过去,我在html或body标记中添加了CSS类,作为在该级别表达页面状态的方便方式 您的CMS也可以出于同样的目的。例如,在WordPress站点中,您可能会看到一系列类,如帖子模板默认单个帖子postid-99999单一格式标准登录类别新闻子类别

在Chrome devtools中遇到了一个关于调试渲染性能的问题。在他的课程中,Umar将
html
标记上CSS类的更改确定为渲染瓶颈的来源。Devtools显示,更改此类可能会影响
html
下面DOM中的3874个元素,并触发昂贵的
重新计算样式
操作

过去,我在
html
body
标记中添加了CSS类,作为在该级别表达页面状态的方便方式

您的CMS也可以出于同样的目的。例如,在WordPress站点中,您可能会看到一系列类,如
帖子模板默认单个帖子postid-99999单一格式标准登录类别新闻子类别uk在帖子的
正文
标记上悬停


我们应该避免这种做法吗?或者它只会在CSS规则中使用类时影响渲染性能吗?

它只会在应用CSS样式时影响性能


浏览器供应商花费大量时间试图确保一流的性能,因此CSS规则被处理,以便能够非常高效地扫描它们以进行必要的渲染更改。。。即使在应用它们时,也会尝试优化会导致层叠回流的更改。

我不确定问题出在哪里。性能问题是由页面的必要重新绘制引起的。因此,如果没有重新绘制,就没有问题。例如,不同的CSS方法(如BEM)正在使用此模式,没有人提到将多个类堆叠在一行中的性能。谢谢@MrLister,我想我明白了-因此,如果没有与类相关的CSS规则,我会在html标记上更改类,浏览器不会尝试重新计算任何样式。我想Umar视频中的重要一点是,当DOM顶部标记上的类影响CSS规则时,这可能会很昂贵。谢谢@Nicholas,我认为问题在于向标记中添加一个类,该标记中有许多不同级别的其他标记。谢谢@scunliffe,这似乎就是答案——我们只需要担心那些添加CSS规则的类。