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

我有一个大的SPA，其中包含许多规则的单个大型CSS文件。其中一些已经过时，应该重构或删除。它是从一组SCSS源文件编译而来的。如何在浏览器中测量CSS解析和渲染时间？

我现在重构样式并想知道是否有方法来测量使用某个特定CSS文件呈现页面需要多长时间。

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

然后，我一步一步地重构它，应用一些“优化”，并在每一步我可以看到，一些变化使得时间减少，例如变成2.21秒，并且随着一些其他变化，这个时间增加，2.5秒。

有没有办法获得该指标？

您可以使用插件像页面加载时间[在Chrome插件存储]给你详细的信息，但据我所知，唯一的衡量指标是网络时间（至少在Chrome中） –

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

完全未经测试，我离开了键盘，但是如果您内嵌样式表，然后将样式元素包装到脚本块中，每个调用'performance.now（）'，会怎么样？这应该给你解析时间。现在对于渲染时间来说，这将会更加困难...... – Kaiido

使用开发人员工具面板这是内置于谷歌浏览器。它也类似于Firefox和Safari，在这里和那里都有明显的细微变化。这会告诉你什么时候该文件正在加载，以及加载时间还需要多长时间。

您可以使用macOS上的Alt + Cmd + I或Windows上的Ctrl + Shift + I来打开Chrome开发工具。这是一份非常全面的文档，其中包含所有信息。

万一有人问的火狐版本，这就是所谓的瀑布。 See here for more information。再次，这是非常彻底的。

2017-03-23 10:04:29

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

[这是你在看什么？]（https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction）如果没有，那么我不完全理解你在问什么。 –

说，我有两个CSS文件 - 一个有2个简单的规则，另一个有20000个规则。首先被解析并在'n'秒内应用于页面，而另一个则需要'm'秒。我如何知道这段时间，并找到我对文件所做的更改与所需时间之间的关联？ –

回答