DevTools 技巧合集七

找出最耗时的CSS选择器

在提升网页渲染性能方面，我们通常会花时间优化JavaScript代码。但是CSS在网页渲染速度中也起着重要作用。特别是CSS选择器有时会导致浏览器引擎在匹配页面DOM时变慢，尤其是当页面具有庞大的DOM树、大量CSS规则并且DOM频繁变化时，这可能成为一个严重问题。

Chrome和Edge在性能工具中提供了一个有用的功能，用于分析效率低下的CSS选择器，称为Selector Stats。

因此，在重写CSS选择器之前，应该测量网页上慢速场景的性能，确保CSS确实对性能产生了负面影响，使用Selector Stats获取改进的思路，优化你的代码，然后再次进行性能测试。

要在Chrome或Edge中使用Selector Stats：

• 1. 打开性能工具。
• 2. 在工具顶部工具栏中点击“捕获设置”，然后选择“启用CSS选择器统计”复选框。
• 3. 开始新的性能记录，运行你的慢速场景，然后停止录制。
• 4. 在捕获的性能分析中，找到一个长时间运行的“Recalculate Style”事件并选择它。
• 5. 在性能工具底部的“Selector Stats”选项卡中查看。
• 6. Selector Stats选项卡显示了浏览器引擎在此“Recalculate Style”事件期间必须（至少尝试）匹配的CSS选择器列表。

按照耗时排序表格，找出引擎匹配时间最长的选择器。同时要查看“Match Attempts”和“Match Counts”列。例如，如果浏览器引擎尝试匹配了1000个元素，但最终实际匹配了0个元素，那么这个选择器可能太宽泛，需要优化。最后，确保查看“% of slow-path non-matches”列，该列告诉你未能匹配选择器的元素比例，以及浏览器引擎为匹配这些元素所使用的不太优化的代码路径比例。

如果想查看整个性能分析文件中的Selector Stats而不仅仅是单个“Recalculate Style”事件，请点击性能分析文件中的空白区域取消选择任何“Recalculate Style”事件。

找出不活跃的CSS样式

有时我们编写的CSS代码完全有效，但却完全没有任何效果，这可能令人沮丧。

确实，有许多情况下，CSS声明对元素没有任何影响。一个常见的例子是在行内元素上使用width属性。虽然这个例子可能大多数人都知道，但是有太多不同的CSS属性和可能的组合方式，我们不可能知道所有CSS不起作用的情况。

Firefox推出了一个非常酷的功能，帮助找出这些“不活跃”的CSS属性，而基于Chromium的浏览器现在也有类似的功能！

在Firefox中：

• 1. 在检查器面板中选择一个元素。
• 2. 在规则面板中查看其应用的样式。
• 3. 不活跃的属性会呈灰色，并且旁边有一个信息图标。

• 4. 将鼠标悬停在信息图标上可以查看属性为何不活跃的原因。

     
     

在Chrome或Edge中：

• 1. 确保已启用该功能：
  • 使用Chrome或Edge 106或更高版本。
  • 在DevTools中打开设置（按F1键）。
  • 选择“实验”选项卡，启用“启用CSS作者提示以显示不活跃规则、弃用属性等”复选框，关闭设置，并在提示时重新加载DevTools。
• 2. 在元素工具中选择一个元素。
• 3. 在样式面板中查看其应用的样式。
• 4. 不活跃的属性旁边有一个信息图标。如果看到这个图标，说明这个属性有一个作者提示可用。

• 5. 悬停在图标上会显示有关属性的信息提示。

     
     

注意：这不是一个审核工具！它不会帮助你在整个代码库中删除无用的CSS规则。它的价值在于检查特定元素时，方便检测给定CSS属性在该元素上是否起作用。

快速识别视窗外的元素

有时候，无论是出于意外还是有意为之，HTML元素可能会位于浏览器视口之外。当元素位于视口之外时，要在开发工具中找到它们可能会很困难。确实，元素工具中的DOM树很好用，但当DOM树非常庞大且嵌套深时，导航起来并不是特别容易。

以下是一个很好的提示，可以通过使用Edge开发工具中的3D视图工具快速找到视口外的元素：

• 1. 在Microsoft Edge中打开开发工具（按F12键）。
• 2. 点击工具栏顶部的更多工具（+）按钮，选择“3D视图”以打开3D视图工具。
• 3. 在左侧边栏中，选择DOM选项卡。

• 4. 缩放和平移3D场景，以找到视口外的元素！