CSS 选择器更改后性能显着下降

Question

我在一个相当复杂的 Web 应用程序中对一些 SASS 选择器进行了小改动，发现性能显着下降。当使用 Chrome 的时间线功能分析页面时，“重新计算样式”的实例（我假设在 DOM 操作后重排页面）从大约 1 毫秒变为大约 100 毫秒，并且这些样式重新计算的受影响元素计数从大约 10 变为大约 1500。

是什么让这个选择器的变化如此邪恶？以后要注意什么，以免再犯同样的错误？

原始 CSS（快速）：

.button-group .button:not(:last-of-type) {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button-group .button:not(:first-of-type) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

修改后的 CSS（非常慢）：

.button-group > :not(:first-of-type) .button, .button-group > :not(:first-of-type).button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button-group > :not(:last-of-type) .button, .button-group > :not(:last-of-type).button {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Answer 1

为了打破这一点，我将忽略.button-group，因为它在两者中相同并且不会影响任何东西。

在第一个示例中，您选择了每个 button 类。浏览器针对搜索类进行了优化，因此通常非常快。然后，您使用 not(:last-of-type) 修饰符，虽然速度较慢，但​​并不重要，因为池已被限制为仅 button 类。

在第二个示例中，您首先搜索:not(:first-of-type)，它对.button-group 的每个子节点执行昂贵的操作。虽然使用直接子运算符 (>) 将有助于限制该池，但它的元素数量可能仍然比第一个示例多。我不太确定你想用.button, &.button 做什么，但无论哪种方式，这种操作的成本都不是很高，因为你只是按班级选择，而且你已经对池进行了相当多的限制。

因此，一般而言，您希望从成本最低的操作变为成本最高的操作，以便在尽可能少的元素上完成密集计算。

旁注，我认为您在第二个示例中.button 之后缺少逗号。

---

编辑：只是想指出你的两段代码编译成的区别。

第一：

.button-group .button:not(:last-of-type)

第二：

.button-group > :not(:first-of-type) .button, 
.button-group > :not(:first-of-type).button {

正如你所看到的，第二个还有很多事情要做。仅这一点就可能是它变慢的原因，尽管我现在正在检查以确保 not 的排序有影响。