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

Question

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

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

说,我在起点,CSS中有很多废话,我可以看到,使用当前膨胀的样式表,渲染应用程序需要2.234秒.

然后,我一步一步地重构它,应用一些"优化",并且在每一步我都可以看到,随着一些变化,渲染时间减少,变成,例如,2.21秒,并且随着一些其他变化,这个时间增加,例如,2.5秒.

有没有办法获得该指标？

Answer 1

使用Google Chrome内置的开发人员工具面板。它也与 Firefox 和 Safari 类似，但各处都有明显的细微变化。这会告诉您文件何时被加载以及加载需要多长时间。

查看 Chrome 的文档。

您可以使用Alt + Cmd + ImacOS 或Ctrl + Shift + IWindows 上的 Chrome DevTools 打开。这是一份非常全面的文档，其中包含所有信息。

如果有人询问Firefox版本，它被称为The Waterfall。浏览此处获取更多信息。再说一次，它非常彻底。