是！对性能有重要影响？

Question

我讨厌他们，它违背了CSS的级联性质，如果你不小心使用它们，你最终会添加更多!important。

但我想知道他们对表现有害吗？

修改
从（快速）回复中我可以得出结论，它不会对性能产生（重大）影响。 但很高兴知道，即使它只是作为劝阻别人的额外论据;）。

编辑2
BoltClock指出，如果有2 !important个声明，那么规格说它会选择最具体的声明。

Answer 1

它不应该对性能产生任何影响。在/source/layout/style/nsCSSDataBlock.cpp#572 看到 firefox的CSS解析器，我认为这是处理覆盖 CSS规则的相关例程。

它似乎只是对“重要”的简单检查。

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

此外， source/layout/style/nsCSSDataBlock.h#219

的评论

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

---

  

  

1. Firefox使用手动编写的自顶向下解析器。在每种情况下都是如此   CSS文件被解析为StyleSheet对象，每个对象都包含CSS   规则。

  

2. 然后，Firefox会创建包含结束值的样式上下文树   （按照正确的顺序应用所有规则后）

  

<强> From: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

现在，您可以轻松地看到，在上述对象模型的情况下，解析器可以轻松地标记受!important影响的规则，而不会产生太多的后续成本。性能下降不是反对!important的好参数。

然而，可维护性确实受到了打击（正如其他提到的答案），这可能是您反对他们的唯一理由。

Answer 2

我不认为!important在浏览器匹配规则的速度方面本质上是不好的（它不构成选择器的一部分，只是声明的一部分）

但是，正如已经说过的那样，它会降低代码的可维护性，因此可能会因未来的变化而导致其大小不必要地增长。 !important的使用也可能降低开发人员的表现。

如果你真的挑剔，你也可以说!important为你的CSS文件添加了11个额外的字节，这不是很多，但我想如果你有一个在你的样式表中可以添加很少!important个。

只是我的想法，遗憾的是我无法找到!important如何影响效果的基准。

Answer 3

!important有它的位置。相信我。它可以保存我很多次，并且作为一种短期解决方案通常更有用，然后才能找到更长，更优雅的方法来解决问题。

然而，像大多数事情一样，它被滥用了，但没有必要担心“表现”。我敢打赌，一个小的1x1 GIF在网页上的性能影响要大于！重要的是。

如果您想优化网页，还有更多！important 路由需要;）;）

Answer 4

幕后发生的事情是，当您正在处理CSS时，浏览器会读取它，遇到!important属性，浏览器会返回应用!important定义的样式。这个额外的过程可能看起来只是一个小小的额外步骤，但如果您提供了许多请求，那么您将获得性能提升。 (Source)

  

在CSS中使用！important通常意味着开发人员自恋＆amp;自私或懒惰。尊重开发者......

使用!important时开发人员的想法：

1. 我摇摆的CSS无效...... grrrr。
2. 我现在该怎么办？
3. 然后!important是啊....现在它工作正常。

然而，仅仅因为我们没有很好地管理CSS，它不是使用!important的好方法。它会产生许多设计问题 - 这比性能问题更糟糕 - 但它也迫使我们使用许多额外的代码行，因为我们用!important覆盖了其他属性，而我们的CSS变得混乱无用的代码。我们应该做的是首先非常好地管理CSS，而不是让属性相互覆盖。

我们可以使用!important。但只有在没有其他出路的情况下才能谨慎使用它。

Answer 5

我同意你不使用它，因为这是不好的做法，无论性能如何。仅凭这些理由，我会尽可能避免使用!important。

但是在表现问题上：不，它不应该引人注目。它可能会产生一些影响，但它应该是如此微小，你永远不会注意到它， 你应该担心它。

如果它足够显着，那么你的代码可能会遇到比!important更大的问题。简单地使用您正在使用的核心语言的正常语法元素永远不会成为性能问题。

让我以回答问题回答你的问题;您可能没有考虑的角度：您的意思是哪种浏览器？

每个浏览器显然都有自己的渲染引擎，并有自己的优化。所以问题现在变成：每个浏览器的性能影响是什么？也许!important在一个浏览器中表现不佳但在另一个浏览器中表现不错？也许在下一个版本中，它会反过来？

我想我的观点是，我们作为Web开发人员不应该考虑（或需要考虑）我们正在使用的语言的各个语法结构的性能影响。我们应该使用那些语法结构，因为它们是实现我们想要做的事情的正确方法，因为它们的表现如何。

性能问题应与分析器的使用一起询问，以分析系统中夹点的位置。修复那些真正让你失望的事情。在你达到单个CSS结构的水平之前，几乎肯定会有更大的问题要解决。

Answer 6

它没有明显影响性能。但它会降低代码的可维护性，因此从长远来看可能会降低性能。

Answer 7

之前不得不多次使用!important，我个人注意到在使用它时没有明显的性能损失。

作为备注，请参阅the answer to this stack question，了解您可能希望使用!important的原因。

另外，我会提到其他人都没有提到的事情。 !important是覆盖内联css而不是编写javascript函数的唯一方法（即使只是一点点也会影响你的性能）。因此，如果您需要覆盖内联css，它实际上可以 保存 一些性能时间。

Answer 8

嗯......重要还是!!重要的？

让我们一步一步地完成这个步骤：

1. Parser必须检查每个属性的重要性，无论您是否使用它 - 因此这里的性能差异为0
2. 当覆盖属性时，解析器必须检查被覆盖的属性是否重要 - 所以这里的性能差异为0
3. 如果被覆盖的属性是重要的，它必须覆盖属性 - 性能命中-1为不使用！important
4. 如果被覆盖的属性是重要的，它会跳过覆盖属性 - 使用的性能提升+1！重要
5. 如果新属性是！important，则无论被覆盖的属性是什么，解析都必须覆盖它！重要或!!重要 - 性能差异0再次

所以我猜！重要的是实际上有更好的性能，因为它可以帮助解析器跳过许多不会跳过的属性。

正如@ryan在下面提到的，唯一的方法是覆盖内联css并避免使用javascript ...所以另一种方法可以避免不必要的性能损失

嗯......结果证明了！重要的是重要的

还有，

• 使用！important为开发人员节省了大量时间
• 有时会让您免于重新设计整个css
• 有时html或父css文件不在您的控制范围内，因此它可以挽救您的生命
• 显然会阻止！重要元素被其他重要元素意外覆盖
• 有时浏览器不会选择正确的属性，而不会在选择器中过于具体，因此使用！important确实变得非常重要，并且可以避免在css中编写大量特定的css选择器。所以我猜即使你使用更多的字节来写！重要的是，它可以在其他地方节省你的字节。我们都知道，css选择器会变得混乱。

所以我猜使用！important可以让开发人员满意，而且我认为非常重要：D

Answer 9

我无法预见!important会妨碍表现，而不是天生就是这样。但是，如果您的CSS充满了!important，则表明您已经超过了合格选择者并且过于具体，并且您已经没有父母或限定符来增加特异性。因此，您的CSS将变得臃肿（将阻碍性能）并且难以维护。

如果您想编写高效的CSS，那么您希望仅根据您的需要而编写modular CSS。建议不要使用ID（带散列），链接选择器或限定选择器。

CSS中以#为前缀的ID具有恶意的特定性，直到255 classes won't override an id（小提琴：@Faust）。虽然ID有更深层次的路由问题，但它们必须是唯一的，这意味着您无法将它们重复用于重复样式，因此您最终会使用重复样式编写线性css。这样做的影响因项目而异，取决于规模，但可维护性将受到极大的影响，在边缘情况下，性能也会受到影响。

如何在没有!important，链接，限定或ID（即#）

的情况下添加特异性

<强> HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

<强> CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

好的，那怎么办？

第一个和第二个示例的工作方式相同，第一个实际上是一个类，第二个是属性选择器。类和属性选择器具有相同的特异性。 .eg1/2-bar不会从.eg1/2-foo继承其颜色，因为它有自己的规则。

第三个例子看起来像是限定或链接选择器，但它们都不是。链接是指前缀与父母，祖先等的选择器;这增加了特异性。限定类似，但您定义选择器适用的元素。资格：ul.class并且链接：ul .class

我不确定你称这种技术为什么，但行为是故意的，documented by W3C

  

允许和重复出现相同的简单选择器   确实增加特异性。

当两个规则之间的特异性相同时会发生什么？

作为@BoltClock pointed out，如果有多个！重要的声明 spec规定最具体的应该优先。

在下面的示例中，.foo和.bar具有相同的特异性，因此行为回退到CSS的级联性质，其中CSS声明的最后一个规则优先于.foo 。

<强> HTML

<div>
    <p class="foo bar">foobar</p>
</div>

<强> CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle