飞龙博客

飞龙博客 飞龙在天

高性能CSS写法探讨

feilong.org 修订于2013-04-16 06:25:22 420 次浏览

编写css有各种途径,有直接dreamweaver视图傻瓜化编写的,有纯手工编写css的,格式上有喜欢缩写紧凑成一行的,有喜欢把css最后一个分号拿掉的,也有喜欢css标准写法的。每个人都有一套自己的css写法和经验。这里飞龙探讨一下自己对高性能CSS写法。修订网址本日志更新网址:http://feilong.org/best-efficient-css 加入收藏夹,查看更方便。

一、CSS选择器对性能的影响

读取html只占了整个响应时间中的5%,其余的时间用来读取网页的css、图片、脚本、flash、视频等。这里主要关注css性能的优化。

CSS引擎由右至左评估每个规则,从 最右边的选择器开始(称为“键”【Key】),并通过移动每个选择器,直到找到一个匹配或丢弃的规则。(“选择器”是应用规则的文档元素。)

选择器匹配html元素时所消耗的时间越少,性能就越好。大家知道id选择器比类选择器好,类选择器比标签选择器性能要好。子选择器比后代选择器性能要好。

二、避免通配选择器

通配选择器使用 * 符合表示,可匹配文档中的每一个元素。如下:

* { font-size:20px;}

三、少使用针对属性的选择器

把某个外观属性当做选择器名称,然后给某个html元素附加此外观,比如左浮动、有浮动、边界、边距、颜色,有些人喜欢这样给某个html元素叠加外观。

下面飞龙举例:

.fl{float:left;}
.fr{float:right;}
.p10{padding:10px;}
.mr0{margin-right:0;}

然后html元素

这种做法不符合对象化写法还在其次,主要是一大堆class 以后修改css还得修改html,很费事。

四、少使用属性过滤选择器

比如下面:
a[href="#index"]{color:#ff0;}
input[type="button"]{border:1px solid #f00;}

针对html元素的某个属性来过滤,其匹配开销比较大。

五、避免类正则过滤选择器

CSS3添加了比如 *=, |=, ^=, $=, 和 ~=,类似于正则过滤,我们应尽量避免使用。

六、尽量不要有多余修饰的规则

例如:
ul#top_blue_nav {...}
form#UserLogin {...}

ID选择是唯一的定义。加上标签或类限制不必要。

七、对非链接应用:hover伪选择器

例如:
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa:hover {...}

非链接元素上的:hover伪选择器在某些情况下*会使IE 7 和IE 8 变慢。

八、移除无匹配样式

有两个好处:1、缩减样式文件体积。2、减少css解析索引项,加快浏览器查找速度。

九、避免CSS表达式

CSS表达式是动态CSS属性,expression方法在其它浏览器中不起作用,单独针对Internet Explorer设置。
比如:#time{background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );}

功能强大,但消耗资源。如果不得不使用,那就使用一次性的expressions。 当第一次expression计算出一个明确的值,就让样式等于这个值,不再变动。如果样式的属性一定要动态的改变,就用时间句柄吧!

十、避免使用@import

加载外部css样式文件,一种是link,另一种是@import。

使用@import,浏览器不能并行下载样式,页面加载延迟。

link写法能够并行下载CSS,加快加载速度。应该简化及合并CSS文件以减少http请求数。

十一、避免AlphaImageLoader滤镜

IE独有属性AlphaImageLoader加载图片时它会终止内容的呈现并且冻结浏览器。使用PNG8格式代替。

如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本无效。

十二、把样式表放到顶部
如果放在地步,页面刚开始会没有任何外观,等html元素下载完,css外观才得以显示。

如果前面有大文件或大js,这个css渲染外观的时间会更加推迟。

把脚本之类放到底部。因为当脚本正在下载,浏览器不会下载其它东西。

十三、预加载

其它性能优化有:减少DNS查询,DNS 预取 、优化图像 、渐进的 JPGs、Spriting (精灵)、视网膜图像、完全不用图片 、减小文件体积,避免重定向,去掉重复的脚本。不要使用非图片原始尺寸来缩放图片。为HTML文档尽早指定字符编码。尽可能并行下载资源。

更新网址:https://feilong.org/best-efficient-css
最初发布:20130416 06:25:22 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站优化

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认