html - -webkit-filter 在单个 div VS 多个 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>您可以更改其中一个，而不会影响任何其他内容。但是，如果您想添加更多相同的元素，则必须确保每个元素都有“box”ID 和“hue”类，这会变得很麻烦。

如果我是您，我会根据您尝试将网站推向何处来权衡利弊，尤其是考虑您将来是否需要扩大规模。