html 标签上的多个 类 是否总是会影响渲染性能?
Do multiple classes on html tag always affect rendering performance?
遇到 interesting video 关于在 Chrome devtools 中调试渲染性能。在他的课程中,Umar 将 html
标签上的 CSS class 的变化确定为渲染瓶颈的来源。 Devtools 显示更改此 class 可能会影响 html
下面 DOM 中的 3,874 个元素并触发昂贵的 recalculate style
操作。
过去,我将 CSS classes 添加到我的 html
或 body
标记中,作为当时表达页面状态的便捷方式等级。
您的 CMS 可能出于相同的目的执行此操作。例如,在 WordPress 站点中,您可能会在 post 的 body
标签上看到一堆 class,例如 post-template-default single single-post postid-99999 single-format-standard logged-in category-news subcategory-uk has-hover
。
我们应该避免这种做法吗?还是仅在 CSS 规则中使用 classes 时才会影响渲染性能?
如果您应用了 CSS 样式,它应该只会影响性能。
浏览器供应商花费大量时间试图确保一流的性能,因此处理 CSS 规则以便可以非常有效地扫描它们以进行必要的渲染更改......甚至在应用它们时尝试优化会导致级联回流的更改。
遇到 interesting video 关于在 Chrome devtools 中调试渲染性能。在他的课程中,Umar 将 html
标签上的 CSS class 的变化确定为渲染瓶颈的来源。 Devtools 显示更改此 class 可能会影响 html
下面 DOM 中的 3,874 个元素并触发昂贵的 recalculate style
操作。
过去,我将 CSS classes 添加到我的 html
或 body
标记中,作为当时表达页面状态的便捷方式等级。
您的 CMS 可能出于相同的目的执行此操作。例如,在 WordPress 站点中,您可能会在 post 的 body
标签上看到一堆 class,例如 post-template-default single single-post postid-99999 single-format-standard logged-in category-news subcategory-uk has-hover
。
我们应该避免这种做法吗?还是仅在 CSS 规则中使用 classes 时才会影响渲染性能?
如果您应用了 CSS 样式,它应该只会影响性能。
浏览器供应商花费大量时间试图确保一流的性能,因此处理 CSS 规则以便可以非常有效地扫描它们以进行必要的渲染更改......甚至在应用它们时尝试优化会导致级联回流的更改。