天哪，让 Patrick Brosset 来谈谈 CSS 性能，他以最平易近人、最实用的方式来谈。并不是说 CSS 总是 导致速度变慢的原因，甚至在提高性能方面也不是最低的果实。
但如果您想在 CSS 方面获得收益，Patrick 有一种不错的方法可以使用 Edge DevTools 找出您最昂贵的选择器。
- 打开 DevTools。
- 转到“Performance”选项卡。
- 确保您启用了“Enable advanced rendering instrumentation”选项。这个选项让我在过程中犯了错误。
- 记录页面加载过程。
- 在报告中打开“Bottom-Up”选项卡。
- 查看您重新计算的样式的大小。
从这里，单击主瀑布视图中的“Recalculated Style”事件之一，您将获得一个新的“Selector Stats”选项卡。看看那些美味的东西！
现在，您将看到所有已处理的选择器，并且可以按它们花费的时间、匹配的次数、匹配尝试次数以及一个称为“fast reject count”的东西进行排序，我 了解到 它指的是轻松快速地从匹配中排除的元素数量。
如果 CSS 确实是需要调查的瓶颈，这里有很多见解。但是请阅读 Patrick 在 Microsoft Edge 博客上的完整帖子，因为他更深入地探讨了原因和方法，并介绍了一个完整的案例研究。