1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

CSS的!important规则对性能有影响吗

作者:用户 来源:互联网 时间:2016-05-31 14:13:30

样式性能代码优先级规则影响

CSS的!important规则对性能有影响吗 - 摘要: 本文讲的是CSS的!important规则对性能有影响吗,     最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式。按照常理来说,越是灵活的东西,需要做的工作就会更多。所以

    最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式。按照常理来说,越是灵活的东西,需要做的工作就会更多。所以 想当然的认为像!important这样灵活、方便的规则如果用得多的话肯定会对性能有所影响。基于这种考虑,本来想把所有的这些样式通过提高优先级给去 掉的。不过后来一想,还是去google一下吧,猜想一般都是不可靠的。于是查到了这篇文章Is !important bad for performance?。下面是大概意思:        firefox对于CSS的解析代码/source/layout/style/nsCSSDataBlock.cpp#562对于important的处理是这样的:

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对于!important规则的判断很简单:将包含!important的样式直接覆盖了正常生成的样式规则,然后如果解 析到后面还有!important规则时,再和以前的important规则比较优先级。就是说,使用!important的CSS规则是置为了最高优先 级,然后最高优先级中去判断应用那个样式。

    

      结论就是,使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug(IE6 IE7(Q) IE8(Q) 不完全支持 !important 规则),使用的时候还要注意。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索样式 , 性能 , 代码 , 优先级 , 规则 影响 css important、css优先级 important、css important的用法、css中important、jquery css important,以便于您获取更多的相关知识。

前端乱码-asp.net前端页面的乱码对程序性能有影响吗?

问题描述 asp.net前端页面的乱码对程序性能有影响吗? .net程序写好的页面查看源代码时,前面代码部分会出现很长的而一段乱码,网上找资料说是.net程序加密过程,这段乱码删掉与不删掉...

针对浏览器隐藏CSS_CSS/HTML

...不一定与你的需求相符,使用前请对照上面的表格。 @import url("") @import url("global.css")   对老版本(版号小于5)的浏览器隐藏规则。 @import url() @import url(global.css)   对Windows平台的老版本(版号小于5)浏览器...

怎么理解移动端H5前端性能优化

...跳出CSS树的渲染,因此请避免CSS表达式。3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。4、正确使用Display的属性,Display属性会影响页面的渲染,建议各位站长要合理使用。...

Sass学习总结

...night-sky.scss这个局部文件里的变量,你只需在样式表中写@import "themes/night-sky"; 引入sass可以重复利用。便于编程。3.2、默认变量值 !default 一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。$fancybox-wi...

对React应用的一些Blind Chicken Eight思考

...s中,声明了一系列的handlexxxxType,那么我们可以在foo.js中import * as all from './foo.js';,然后创建一个类似于mapActionTypeToHanleFunction的处理函数。这里就不用在每个case都去调用某个函数了。一次用户操作导致的多个位置的数据变动是...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备