Html 单个div与多个div上-webkit过滤器的性能

假设我有一个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>

---

我认为浏览器的性能是相同的，因为无论哪种方式，您都在有效地向

添加相同的属性。我认为这里的问题更多地与可伸缩性有关，因此您必须考虑代码的目标是什么，以及将来是否需要对其进行编辑

第一个选项的优点是，如果您想要更改类，您只需编辑外部的

标记，您的更改将应用于所有内部元素，但这会减少对每个内部元素的控制

第二个选项使您能够更好地控制每个

，您可以更改其中一个，而不会影响任何其他内容。然而，如果您想添加更多相同的元素，那么必须确保每个元素都有“box”ID和“hue”类，这将开始变得混乱

---

如果我是你，我会根据你想和你的网站一起去的地方来权衡正反两方面的因素，尤其是考虑你将来是否需要扩展它。

让我们说可读性和编辑性不是问题，只是可扩展性。当您添加更多的框时，哪个会运行得更快？另外，-webkit filter是一种CSS着色器，从技术上讲，它不是子元素继承的属性（您可以通过嵌套来堆叠过滤器）。