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. 大数据组件原理总结-Hadoop、Hbase、Kafka、Zookeeper、Spark

    Hadoop原理 分为HDFS与Yarn两个部分.HDFS有Namenode和Datanode两个部分.每个节点占用一个电脑.Datanode定时向Namenode发送心跳包,心跳包中包含Datano ...

  2. 前端学习之本地储存与cookie

    今天主要的学习内容是cookie与本地储存的知识, 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别, ...

  3. [置顶]PADS PCB功能使用技巧系列之NO.005- 如何正确使用Verify Design?

    有没有遇到过进行Verify Design通过后,回来的样板仍然出现短路或其它莫名其妙的问题?此情此景,你是否一度对PADS失去的希望?但,工具是没有问题的,看看怎么样正确有效地使用它吧.主要需要注意 ...

  4. [Java基础]java中this和super

    一.this关键字 1.this概念 (参考:http://www.cnblogs.com/xdp-gacl/p/3636071.html)   this是一个引用,它指向自身的这个对象,它的内存分析 ...

  5. Matlab 运行C程序出现的编译出错问题

    2016-03-18 17:18:34 最近在运行一些公开的Matlab代码包时,比如LibSVM.crfChain等,遇到了需要在Matlab环境下编译C程序的问题,对于我所遇到的问题,给出以下解决 ...

  6. hdu 3951 - Coin Game(找规律)

    这道题是有规律的博弈题目,,, 所以我们只需要找出规律来就ok了 牛人用sg函数暴力找规律,菜鸟手工模拟以求规律...[牢骚] if(m>=2) { if(n<=m) {first第一口就 ...

  7. Linux环境下Oracle数据库启动停止命令

    切换root至oracle数据库账号 su – oracle 查看数据库服务状态: ps -ef |grep oracle netstat –an|grep 1521 查看数据库监听状态: [orac ...

  8. 浅谈 facebook .net sdk 应用

    今天看了一篇非常好的文章,就放在这里与大家分享一下,顺便也给自己留一份.这段时间一直在学习MVC,另外如果大家有什么好的建议或者学习的地方,也请告知一下,谢谢. 这篇主要介绍如何应用facebook ...

  9. 【腾讯Bugly干货分享】聊一聊微信“小程序”

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ecdf5ef03abecd43216fd0 Dev Club 是一个交流移动 ...

  10. nginx(3、负载均衡)

    当业务系统需要配置集群时,会用到nginx的负载均衡功能.nginx提供如下几种: 1.轮询(默认):将不同的请求随机分配给配置的服务器,若出现宕机,则自动切换:轮询可配置weight值,即权重,权重 ...