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

时间:2017-09-27 10:45:35

标签: html css performance dom render

关于调试Chrome devtools中的渲染效果interesting video。在他的课程中,Umar确定将html标签上的CSS类更改为渲染瓶颈的来源。 Devtools表明,更改此类可能会影响html下面的DOM中的3,874个元素,并触发昂贵的recalculate style操作。

在过去,我已将CSS类添加到htmlbody标记中,作为表达该级别页面状态的便捷方式。

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

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

1 个答案:

答案 0 :(得分:0)

如果你应用了CSS样式,它应该只影响性能。

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