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>

现在，让我们来说，＆＃34;领先＆＃34;和＆＃34;第一＆＃34;类具有相同的属性：

.first,
.second {
  color: green;
}

当＆＃34;第二＆＃34; class适用于那个特定的＆＃34; p＆＃34;元素，浏览器肯定会应用新的CSS规则，然后计算差异;因为没有区别，浏览器不会重新粉饰。如果您使用Chrome DevTools（性能标签）来跟踪实际发生的情况，那么每秒会画出0帧，尽管会有一个操作＆＃34;重新计算样式＆＃34;花几毫秒。

让我们说我们删除一个课程并将其带回

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

仍然没有重画。

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

.third {
  color: blue;
}

并将此课程添加到我们的＆＃34; p＆＃34;：

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

在这种情况下，＆＃34;颜色＆＃34; ＆＃34; p＆＃34;的风格属性会改变，这将导致重画。在iPhone 7（Safari）上，以208fps的速率总共花了4.8毫秒来执行此操作。延迟非常低，但是，根据要更改的样式集，性能可能会有所不同。

所以，是的，CSS中的另一个应用相同样式属性的规则会导致另外一个实际需要时间的检查，但这个时间可以忽略不计。我非常确定你有更重要的事情需要优化。

为了进一步阅读，有一个关于渲染性能值得一读的精彩教程Reduce the Scope and Complexity of Style Calculations。

最后，还有a very nice compilation of all the things that cause reflow/repaint值得一读。

CSS多次执行规则

1 个答案: