我有一个大型 SPA，其中包含一个大型 CSS 文件，其中包含许多规则。其中一些已经过时，应该重构或删除。它是由一组 SCSS 源文件编译而成。
我现在正在重构样式，想知道是否有一种方法可以测量使用某些特定 CSS 文件渲染页面所需的时间。
比如说，我正处于起点，CSS 中有很多垃圾，我可以看到，使用当前臃肿的样式表，渲染应用程序需要 2.234 秒。
然后，我一步步重构它，应用一些“优化”，在每一步中我都可以看到，通过一些更改，渲染时间会减少，例如变为 2.21 秒，而随着其他一些更改，该时间会增加，例如 2.5 秒.
有没有办法获得该指标？
测量具有特定 CSS 文件的页面渲染性能的一种方法是使用浏览器开发人员工具。大多数现代浏览器都有内置工具，可让您分析网页的性能，包括渲染所需的时间。
以 Google Chrome 为例，您可以通过右键单击页面并选择“检查”或按 Ctrl + Shift + I 打开开发人员工具。然后转到“性能”选项卡并单击录制按钮开始记录页面的性能。
记录性能后，您可以分析结果数据，了解使用特定 CSS 文件渲染页面需要多长时间。查找与渲染相关的事件，例如“重新计算样式”或“布局”，看看时间都花在哪里了。
通过对 CSS 文件进行增量更改并重新测量性能，您可以跟踪每个更改如何影响页面的渲染时间。
此外，还有一些在线工具和服务可以帮助您分析网页的性能，例如 Google PageSpeed Insights 或 WebPageTest。这些工具可以提供详细的性能指标和提高页面速度的建议。
使用 Google Chrome 内置的开发者工具面板。它也与 Firefox 和 Safari 类似，但各处都有明显的细微变化。这会告诉您文件何时加载以及加载需要多长时间。
您可以使用 macOS 上的
Alt + Cmd + ICtrl + Shift + I如果有人要求 Firefox 版本，它被称为 The Waterfall。 请参阅此处了解更多信息。再次强调，非常彻底。