html标签上的多个类总是会影响渲染性能吗？

Posted 2023-02-22

【中文标题】html标签上的多个类总是会影响渲染性能吗？

【英文标题】：Do multiple classes on html tag always affect rendering performance?

【发布时间】：2018-03-08 19:47:32

【问题描述】：

遇到了interesting video，关于在 Chrome 开发工具中调试渲染性能。在他的课程中，Umar 将 html 标签上 CSS 类的更改确定为呈现瓶颈的根源。 Devtools 显示更改此类可能会影响 DOM 中 html 以下的 3,874 个元素，并触发昂贵的 recalculate style 操作。

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

您的 CMS 可能出于同样的目的这样做。例如，在 WordPress 网站中，您可能会在帖子的 body 标签上看到一堆类，例如 post-template-default single single-post postid-99999 single-format-standard logged-in category-news subcategory-uk has-hover。

我们应该避免这种做法吗？还是只有在 CSS 规则中使用类时才会影响渲染性能？

【问题讨论】：

我不确定是什么问题。性能问题是由必要的页面重新绘制引起的。所以如果没有重绘，就没有问题。

例如 BEM 等不同的 CSS 方法都使用这种模式，没有人谈论在一行中堆叠超过 1 个类的性能。

谢谢@MrLister，我想我明白了 - 所以如果没有与类相关的 CSS 规则，并且我更改了 html 标签上的类，浏览器将不会尝试重新计算任何样式.我认为 Umar 视频的重点是，当 are CSS 规则受 DOM 顶部标签上的类影响时，这可能会很昂贵。

谢谢@Nicholas，我认为问题在于将一个类添加到一个标签中，其中包含许多不同级别的其他标签。

【参考方案1】：

只有应用了 CSS 样式时，它才会影响性能。

浏览器供应商花费大量时间来确保一流的性能，因此处理 CSS 规则，以便可以非常有效地扫描它们以查找必要的渲染更改......甚至在应用它们时尝试优化会导致级联的更改回流。

【讨论】：

感谢@scunliffe，这似乎是答案——我们只需要担心那些添加 CSS 规则的类。