如何测量浏览器中的 CSS 解析和渲染时间？

Posted 2023-03-05

【中文标题】如何测量浏览器中的 CSS 解析和渲染时间？

【英文标题】：How to measure CSS parsing and rendering time in a browser?

【发布时间】：2017-08-15 16:30:31

【问题描述】：

我有一个大型 SPA，其中包含一个包含许多规则的大型 CSS 文件。其中一些已经过时，应该重构或删除。它是从一组 SCSS 源文件编译而来的。

我现在正在重构样式，想知道是否有办法测量使用某些特定 CSS 文件呈现页面所需的时间。

说，我在起点，CSS 中有很多废话，我可以看到当前臃肿的样式表需要 2.234 秒来呈现应用程序。

然后，我一步一步地重构它，应用一些“优化”，在每一步我都可以看到，随着一些变化，渲染时间减少了，比如说，2.21 秒，而随着一些其他变化，这个时间增加了，比如说， 2.5 秒。

有没有办法获得该指标？

【问题讨论】：

您可以使用诸如页面加载时间[在 Chrome 插件商店中] 之类的插件来为您提供详细信息，但据我所知，按时间衡量的唯一指标是网络时间（至少在 Chrome 中）

只是好奇，但为什么整个应用程序只有一个臃肿的 css 文件？您可以将 scss 分解为每个组件的模块，并且仅针对在浏览器中呈现的组件进行编译。

完全未经测试，我远离键盘，但是如果你内联你的样式表，然后将你的样式元素包装到脚本块中，每个调用 performance.now() 怎么办？这应该给你解析时间。现在对于渲染时间，它会更难......

【参考方案1】：

使用谷歌浏览器内置的开发者工具面板。它也与 Firefox 和 Safari 类似，只是到处都有明显的细微变化。这将告诉您文件何时加载以及加载所需的时间。

Take a look at the documentation for Chrome.

您可以在 macOS 上使用 Alt + Cmd + I 或在 Windows 上使用 Ctrl + Shift + I 打开 Chrome DevTools。这是一个包含所有信息的非常全面的文档。

如果有人要求使用 Firefox 版本，则称为 The Waterfall。 See here for more information。再次，它非常彻底。

【讨论】：

我不需要分析文件是如何通过网络加载的，我需要知道浏览器如何解析CSS文件并用它来渲染页面。

Is this what you're looking then? 如果没有，那我不完全明白你在问什么。

说，我有两个 CSS 文件——一个有 2 条简单规则，另一个有 20000 条规则。第一个在n 秒内解析并应用于页面，另一个需要m 秒。我如何知道该时间并找到我对文件的更改与所需时间之间的关联？