首页 文章

是！对性能有重要影响？

提问于
浏览 次
190

我讨厌它们，它无视CSS的级联性质，如果你不小心使用它们，你最终会在循环中添加更多 !important .

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

EDIT
从（快速）回复中我可以得出结论，它很高兴知道，即使它只是作为劝阻别人的额外论据;） .

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

css performance

9 回答

  • 7

    它不应该对性能产生任何影响 . 看到 firefox's CSS parser at /source/layout/style/nsCSSDataBlock.cpp#572 ，我认为这是相关的例程，处理CSS规则的 overwriting .

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

    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.
     * 
     * ...
     */

    Firefox使用手动编写的自顶向下解析器 . 在这两种情况下，每个CSS文件都被解析为StyleSheet对象，每个对象都包含CSS规则 . Firefox然后创建包含结束值的样式上下文树（在按正确的顺序应用所有规则之后）

    CSS Parser Firefox

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

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

    However, maintainability does take a hit (as other answers mentioned), which might be your only argument against them.

    回复于
  • 4

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

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

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

    只是我的想法，遗憾的是我无法找到关于 !important 如何影响性能的任何基准 .

    回复于
  • 58

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

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

    如果你想优化你的页面，还有更多！重要路线要采取;）;）

    回复于
  • 13

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

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

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

    • 我摇摆的CSS没有用...... grrrr .

    • 我现在该怎么办？

    • 然后 !important 是啊....现在它工作正常 .

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

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

    enter image description here

    回复于
  • 113

    我同意你不使用它，因为它尽可能避免使用 !important .

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

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

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

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

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

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

    回复于
  • 6

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

    回复于
  • 31

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

    作为注释，请参阅the answer to this stack question，原因您可能想要使用 !important .

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

    回复于
  • 7

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

    让我们一步一步地完成：

    • Parser必须为每个属性检查！important，无论您是否使用它 - 因此这里的性能差异为0

    • 当覆盖属性时，解析器必须检查被覆盖的属性是否重要 - 所以这里的性能差异再次为0

    • 如果被覆盖的属性是重要的，它必须覆盖属性 - 性能命中-1为不使用！important

    • 如果被覆盖的属性是！important，它会跳过覆盖属性 - 使用的性能提升为1！important

    • 如果新属性是！important，则解析必须覆盖它，无论被覆盖的属性是！important或!! important - 性能差异0再次

    So I guess !important actually has better performance as it can help parser skip many properties that it won't skip otherwise.

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

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

    并且，

    • using！important为开发人员节省了大量时间

    • 有时可以避免重新设计整个CSS

    • 有时html或父css文件不在您的控制之下，因此它可以挽救您的生命

    • 显然可以防止！重要元素被其他重要元素意外覆盖

    • 有时浏览器不会选择正确的属性，而不会在选择器中过于具体，因此使用！important确实变得非常重要，并且可以避免在css中编写大量特定的css选择器 . 所以我猜即使你使用更多的字节来写！重要的是，它可以在其他地方节省你的字节 . 我们都知道，css选择器会变得混乱 .

    So I guess using !important can make developers happy, and I think that's very important ：D

    回复于
  • 266

    我无法预见 !important 阻碍了表现，反正本来就不是 . 但是，如果你的CSS充满了 !important ，则表明你已经没有父母或限定符来增加特异性了 . 因此，您的CSS将变得臃肿（这将阻碍性能）并且难以维护 .

    Important CSS rule meme

    如果你想编写高效的CSS，那么你希望只有你需要的那样具体并编写modular CSS . 建议不要使用ID（带散列），链接选择器或限定选择器 .

    在CSS中以 # 为前缀的ID是非常具体的，直到255 classes won't override an id（小提琴：@Faust） . ID 's have a deeper routed problem too though, they have to be unique, this means you can' t将它们重复用于重复样式，因此您最终会使用重复样式编写线性css . 这样做的影响因项目而异，取决于规模，但可维护性将受到极大的影响，在边缘情况下，性能也会受到影响 .

    如何在没有！important，chaining，qualifying或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 继承其颜色，因为它有自己的规则 .

    第三个例子看起来像是限定或链接选择器，但是's neither. Chaining is when you prefix selectors with parents, ancestors, and so on; this adds specificity. Qualifying is similar, but you define the element the selector'适用于 . 资格： ul.class 和链接： ul .class

    我'm not sure what you' d称这种技术，但行为是有意的，是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

    回复于

相关问题