伤羽博客

新浪微博腾讯微博关注微信QQ交谈

最新碎语:新工作新起点,加油加油加油!!!

您的位置:伤羽博客 >CSS> 编写高性能的css代码

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

转载于晶晶的博客


版权申明:此文如未标注转载则为伤羽原创,转载请注明出自伤羽博客

本文网址:http://www.shangyu520.com/post-7.html

分享到:

发表评论

游客 表情
Ctrl+Enter快速提交