您的位置:晶晶的博客>前端>编写高性能的css代码

编写高性能的css代码

本文来至MDN,参考伯乐在线翻译总结而来。有人说,css也有性能考虑么?这个当然,虽然css解析并不耗费服务器的运算资源,但在客户浏览器上解析呈现时也是会有不同性能的,尝尝看到某些网页打开的瞬间样式丑陋或不全,除了网络问题css未完全加载外,css代码的性能也是一个因素。这里的性能特指加速浏览器对css代码解析的过程。本文原始英文:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

点击查看原图

性能优异的css代码,能提升浏览器渲染的速度;本质上一个页面中浏览器需要解析的css规则越少性能越好;以下是来至MDN的一些书写高性能css代码的总结性规则。

一、css选择器性能排行,依次排序降低

  • ID 规则,如#header{}
  • Class 规则,如.sidebar{}
  • 标签规则,如div{}
  • 通用规则,如*{}

二、一些书写高性能css代码的参考规则

  • 避免过度约束

一条普遍规则,不要添加不必要的约束。

// 的ul
ul#someid {..}
.menu#otherid{..}

//
#someid {..}
#otherid {..}
  • 避免过多的后代选择符

过多的css后代选择符不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改。

// 
html div tr td {..}
  • 避免链式多层选择符

这和过度约束的情况类似,可以考虑创建一个新的CSS类选择符代替。

//  .icon
.menu.left.icon {..}

// 便 .icon.menu-left-icon
.menu-left-icon {..}
  • 坚持KISS原则

假设html结构如下

<ul id="navigator">
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="dribble">Dribbble</a></li>
</ul>

css样式书写如下

// 
#navigator li a {..}

//
#twitter {..}
...
  • 使用简约、紧凑的语法

尽可能的使用简约、紧凑语法。

//  了css
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image: url(../imgs/carrot.png);
background-position: bottom;
background-repeat: repeat-x;
}
//
.someclass {
padding: 20px 10px 20px 10px;
background: #000 url(../imgs/carrot.png) repeat-x bottom;
}
  • 避免不必要的重复

重复的css代码在浏览器渲染解析时也会加重负担。

// 

.someclass {
color: red;
background: blue;
font-size: 15px;
}
.otherclass {
color: red;
background: blue;
font-size: 15px;
}

//
.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}
  • 遵循一个标准的css样式声明顺序

对页面的css书写,有定位、元素层级、浮动、边框、颜色、背景灯要素,书写时遵循一定的顺序标准。

.someclass {
/* Positioning */
/* Display & Box Model */
/* Background and typography styles */
/* Transitions */
/* Other */
}
  • 组织好的代码格式

这个应该算是便于识读,避免上述提到的几条规则出现,识读不畅时常会出现重构通用性样式的情况,某种程度上降低了css代码的性能。这里仅作举例,因程序猿习惯不同,书写样式与识别性也不一样。

// 
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
...
}

//
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
...
}

//
.someclass {
background-image:
linear-gradient(#000, #ccc),
linear-gradient(#ccc, #ddd);
box-shadow:
2px 2px 2px #000,
1px 4px 1px 1px #ddd inset;
}

当然,css代码开发有各种书写排版样式,哪种便于识别、尽可能的避免因书写样式造成的识别不畅而多次重置样式段即可。当然,不可避免的会出现需要重置已有css样式的情况,以上这些只是一个建议性的规则。

====

css代码书写因人而异,秉持一个便于升级重构为首、性能兼顾的原则,是前端开发者们需要在开发过程中不断总结、不断提升的。这里三言两语也无法完全道明。


转载请注明本文标题和链接:《编写高性能的css代码

相关推荐

网友评论3

路人甲 表情
Ctrl+Enter快速提交
  1. #1

    写得极度独到,把外围的头脑都抒发了进去。
    w88127 http://www.hfchcr.com

    w88127 11个月前 (09-18) 回复
  2. #2

    这是小尾巴吗?好紧张、第一次用、怎样才能装作经常用的样子?  妥妥的.....

    该昵称已屏蔽 2年前 (2015-03-03) 回复
  3. #3

    倒萨发生大发的发放阿迪发生的

    爱的色放 3年前 (2014-04-11) 回复