是!对性能有重要影响？

Question

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

但我想知道它们对性能有害吗？

编辑
从(快速)回复中我可以得出结论,它不会对性能产生(重大)影响.但很高兴知道,即使它只是作为劝阻别人的额外论据;).

编辑2
BoltClock指出,如果有2个!important声明规格说它将选择最具体的一个.

Answer 1

它不应该对性能产生任何影响.看到firefox的CSS解析器,/source/layout/style/nsCSSDataBlock.cpp#572我认为这是相关例程,处理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然后创建包含结束值的样式上下文树(在按正确的顺序应用所有规则之后)

来自:http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

现在,您可以很容易地看到,在上述对象模型的情况下,解析器可以!important轻松地标记受其影响的规则,而无需后续成本.性能下降不是一个好的论据!important.

但是,可维护性确实受到了打击(如提到的其他答案),这可能是您反对它们的唯一理由.

Answer 2

我认为!important浏览器与规则的匹配速度本身并不是很糟糕(它不构成选择器的一部分,只是声明的一部分)

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

如果你真的很挑剔,你也可以说!important你的CSS文件增加了11个额外的字节,这不是很多,但我想如果你!important的样式表中有很多s,它可以加起来.

只是我的想法,不幸的是我找不到任何关于如何!important影响性能的基准.

Answer 3

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

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

如果你想优化你的页面,还有更多!重要路线要采取;);)

Answer 4

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

在CSS中使用!important通常意味着开发人员自恋,自私或懒惰.尊重开发者......

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

1. 我摇摆的CSS不起作用...... grrrr.
2. 我现在应该怎么做？？
3. 然后!important是啊....现在它工作正常.

然而,这不是一个好的方法,!important因为我们没有很好地管理CSS.它创造了很多的设计问题-这不是性能的问题更糟糕-但它也迫使我们,因为我们覆盖与其他性质使用的代码很多额外的线路!important和我们的CSS变得混乱无用的代码.我们应该做的是首先非常好地管理CSS,而不是让属性相互覆盖.

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

Answer 5

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

但在绩效问题上:不,它不应该引人注目.它可能会产生一些影响,但它应该是如此微小,你永远不会注意到它,你也不应该担心它.

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

让我用一个反驳的问题回答你的问题; 您可能没有考虑过的角度:您的意思是哪个浏览器？

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

我想我的观点是,我们作为Web开发人员不应该考虑(或需要考虑)我们正在使用的语言的各个语法结构的性能影响.我们应该使用那些语法结构,因为它们是实现我们想要做的事情的正确方法,因为它们的执行方式.

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

Answer 6

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

Answer 7

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

作为注释,请查看此堆栈问题的答案,以了解您可能想要使用的原因!important.

我还会提到其他人都没有提到的事情.!important是覆盖内联css的唯一方法是编写一个javascript函数(即使只是一点点也会影响你的性能).因此,如果您需要覆盖内联css,它实际上可以节省一些性能时间.

Answer 8

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

让我们一步一步地完成:

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

所以我猜!重要的是实际上有更好的性能,因为它可以帮助解析器跳过许多属性,否则它将不会跳过.

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

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

并且,

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

所以我想使用!important可以让开发人员满意,而且我认为这非常重要:D