CSS多次执行规则

Question

在以下示例中，我想可视化具有相同样式的元素的两个状态。无论其处于状态" foo"或" bar"状态，该元素应该看起来相同。该元素也可能具有两个状态

<div id="elem" foo bar></div>

CSS样式

#elem {
  width: 100px;
  height: 100px;
  background-color: red;
}
#elem[foo],
#elem[bar] {
  opacity: 0.5;
}

在此示例中，如果设置了foo和bar属性，则将规则选择两次。有更好的方法，还是可能的性能或可视化问题？

谢谢

Answer 1

css被告知慢。它适用于一种称为反流/重新粉刷的现象。它在一定程度上适用于选择器效率。许多具有相同样式属性的选择器是连续应用的，这是一个特定的实际情况。让我们挖掘它。

例如，您有一个元素：

<p class="first">Lorem ipsum</p>

然后您添加另一个类，以便它变成

<p class="first second">Lorem ipsum</p>

现在，假设"铅"one_answers"第一"类具有相同的属性：

.first,
.second {
  color: green;
}

将"第二"类应用于该特定的" P"元素时，浏览器肯定会应用新的CSS规则，然后计算差异；因为没有区别，所以浏览器不会重新粉刷。如果您使用Chrome DevTools(Performance Tab(跟踪实际发生的事情，则每秒绘制的实际情况将有0帧，尽管将有几微秒的操作"重新计算样式"。

假设我们删除了课，然后将其带回

<p class="first">Lorem ipsum</p>

仍然没有重新粉刷。

但是现在，让我们介绍另一个具有不同属性的类：

.third {
  color: blue;
}

并将此类添加到我们的" P"：

<p class="first second third">Lorem ipsum</p>

在这种情况下，" p"的"颜色"样式属性将改变，这将导致重新粉刷。在iPhone 7(Safari(上，执行此操作的总数为4.8ms，总计为208fps。但是，延迟相当低，但是，根据更改的样式，性能可能会有所不同。

因此，是的，在CSS中使用相同样式属性的另一条规则导致另外一项实际需要时间的检查，但是这次可以忽略不计。我很确定您还有更多重要的事情要优化。

---

为了进一步阅读，有一个关于渲染性能值得阅读的不错的教程，降低样式计算的范围和复杂性。

最后，所有引起反流/重新绘制值得阅读的事物都非常好。