http://boagworld.com/dev/why-you-should-care-about-css-page-performance/

http://css-tricks.com/efficiently-rendering-css/

https://developers.google.com/speed/docs/best-practices/rendering

作者给出的 CSS 性能小提示:

1. 大家都知道 id 选择器的表现效果要优于 class,事实虽然也如此,但仅仅是非常微小的差别,几乎可以不予考虑;
2. CSS3 属性往往是影响页面性能的罪魁祸首,尤其是 animation 与 @font-face,谨慎地使用;
3. 现代浏览器支持 Javascript 与 Flash 硬件加速,却不支持 CSS, 虽然 webkit 有优化功能,但还是受限的;
4. 移动平台的情况是,即便现在最先进的手机也不及 10 年前最先进的电脑;
5. 人脑有大约 80 毫秒的反应时间,优化页面性能时不要在一些细枝末节的地方花太多精力,专注于拖慢严重的地方

6. 浏览器读 CSS 的顺序是从右往左,比如 ul > li a[title="home"],最先被读到的第一部分是 a[title="home"]

7. 效率由高到低的选择器依次是 ID, class, tag, universal :

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title='home'] /* Universal */

因为浏览器从右往左读,#main-nav > li {} 这一句即使用到了 id 选择器,实际效率却不会提升多少。

8. 不需要这样写 ul#main-navigation {},因为 ID 已经是独一无二的了,同理,tag 也要尽可能地避免与 class 一同使用。

9. 后代选择器是性能最差的,尤其是后代中包含 tag 或者 universal 选择器,比如 html body ul li a {} 简直是一场灾难。

10. 浏览器如果发现某个选择器不能匹配任何元素,将会立即终止尝试,开始匹配下一个选择器,从而提高执行效率。

11. 重新思考一下为什么要这样写,是不是还有优化的可能呢?比如利用元素的继承性可以省下很多不必要的设定。

12. 如果很在意性能,尽量少用 CSS3 选择器。

CSS 性能的更多相关文章

  1. CSS性能分析,如何优化CSS提高性能

    不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...

  2. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  3. 提高 web 应用性能之 CSS 性能调优

    简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 ...

  4. 谈谈CSS性能

    CSS性能优化 1.衡量属性和布局的消耗代价: 2.探索W3C的性能优化新规范: 3.用测试数据判断优化策略. 慎重选择高消耗的样式 1.box-shadows; 2.border-radius; 3 ...

  5. [转]提高 web 应用性能之 CSS 性能调优

    简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 ...

  6. CSS性能优化的8个技巧

    本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...

  7. CSS性能优化探讨

    大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向 ...

  8. 如何提高CSS性能?CSS优化、提高性能提升总汇

    如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性.   1.尽量将样式写在单独的 ...

  9. css性能优化

    1.前端 1.1.减少http请求次数: 1.1.1先了解下HTTP对性能的影响,HTTP是浏览器和服务器通过Interet进行相互通信的协议.HTTP是一种客服端/服务器协议,有请求和响应构成. 浏 ...

随机推荐

  1. 可变长度的Fibonacci数列

    原题目: Write a recursive program that extends the range of the Fibonacci sequence.  The Fibonacci sequ ...

  2. spark学习笔记总结-spark入门资料精化

    Spark学习笔记 Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用. ...

  3. player.swf播放flv方式

    <embed src="../images/player.swf" allowFullScreen="true" quality="high&q ...

  4. CAS 4.0.0RC 配置MD5验证功能

    配置内容同一样,只是增加一些配置. 因为cas已经默认就支持MD5加密验证,所以只是修改一下配置就可以了. <bean id="primaryAuthenticationHandler ...

  5. MFC学习随笔(1)

    最近在学习用MFC编写一个简单的界面.其实MFC并不是十分复杂的,经过一段时间的熟悉就可以实现许多基础功能.但是在编写的过程中,经常会遇到林林总总的bug,让人摸不到头脑.今天记录一个过去没有注意过的 ...

  6. ListView组件应用源码

    首先在xml文件中定义ListView组件 <ListView android:id="@+id/show_view_list" android:layout_width=& ...

  7. Ubuntu 12.04 改造指南

    文章转自:http://www.lupaworld.com/article-217719-1.html 升级12.04已经有一段时间了.作为一个从08年就开始用Ubuntu的老用户,我觉得作为一个LT ...

  8. LEFT JOIN 多表查询的应用

    表结构如下:只把主要字段列出 表一:付款记录表  Gather 字段:GatherID , AccountID, PayMents 金额, PayWay  付款方式 1 现金 2 刷卡 表2:销售记录 ...

  9. javascript position兼容性随笔

    一.Javascript源码 if (!window.jasen.core.Position) { window.jasen.core.Position = {}; } function Size(w ...

  10. 嗅探、中间人sql注入、反编译--例说桌面软件安全性问题

    嗅探.中间人sql注入.反编译--例说桌面软件安全性问题 今天这篇文章不准备讲太多理论,讲我最近遇到的一个案例.从技术上讲,这个例子没什么高深的,还有一点狗屎运的成分,但是它又足够典型,典型到我可以讲 ...