-webkit-filter在单个div上对多个div的性能

Question

假设我有一个CSS类：

.hue {
  -webkit-filter:hue-rotate(10deg);
}

/* arbitrary */
#box {
  width:10px;
  height:10px;
}

哪个浏览器的性能更好？

<div class='hue'>
  <div id="box"></div>
  <div id="box"></div>
</div>

... 要么 ...

<div id="box" class='hue'></div>
<div id="box" class='hue'></div>

Answer 1

我认为浏览器的性能将是相同的，因为您实际上是在两种方式中都向<div>添加了相同的属性。 我认为这里的问题更多地与可伸缩性有关，因此您必须考虑代码的目标，以及将来是否需要对其进行编辑。

第一种选择的好处是，如果您想更改类，则只需编辑外部的<div>标记，并且所做的更改将应用​​于所有内部的<div>标记，但这将使您对每个内部标记的控制较少内部元素。

第二个选项使您可以更好地控制每个<div>并且可以在不影响其他任何内容的情况下进行更改。 但是，如果您想添加更多这些相同的元素，则必须确保每个元素都具有“ box” ID和“ hue”类，这会变得很混乱。

如果我是您，那么我只会根据您尝试使用网站的位置来权衡利弊，尤其要考虑将来是否需要扩大规模。