哎呀，留给 Patrick Brosset 谈论 CSS 性能 以最平易近人和最实用的方式。 并不是说 CSS 总是 是什么加快了速度，甚至是提高性能时最容易实现的目标。
但是， if 你正在寻找 CSS 方面的收益，Patrick 有一个很好的方法可以使用 Edge DevTools 找出你最昂贵的选择器：
- 破解打开 DevTools。
- 前往性能选项卡。
- 确保启用了“启用高级渲染工具”选项。 这让我在这个过程中绊倒了。
- 记录页面加载。
- 打开报告中的“自下而上”选项卡。
- 检查重新计算的样式的大小。
从这里，单击主瀑布视图中的一个重新计算的样式事件，您将获得一个新的“选择器统计”选项卡。 看看那些粘糊糊的善良！
现在您会看到所有已处理的选择器，并且可以根据花费的时间、匹配的次数、匹配尝试的次数以及称为“快速拒绝计数”的东西对它们进行排序 我学会了 是可以轻松快速地从匹配中消除的元素数。
如果 CSS 真的是需要调查的瓶颈，这里有很多见解。 但是请阅读 Patrick 在 Microsoft Edge 博客上的完整帖子，因为他更深入地探讨了原因和方法，并介绍了整个案例研究。
- SEO 支持的内容和 PR 分发。 今天得到放大。
- 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
- Sumber: https://css-tricks.com/the-truth-about-css-selector-performance/
