转载与http:///2013/04/css-performance-2/
CSS性能一：
如何写 CSS 令浏览器的执行效率最高呢？翻译一篇 Chris Coyier 的 Efficiently Rendering CSS 帮助理清思路。此外，Google 也有一篇更详细的讲解文章 Optimize browser rendering。
第一，浏览器读 CSS 的顺序是从右往左，比如 ul > li a[title="home"]，最先被读到的第一部分是a[title="home"]。
第二，效率由高到低的选择器依次是 ID, class, tag, universal ：
#main-navigation{}/* ID (Fastest) */body.home#page-wrap{}/* ID */.main-navigation{}/* Class */ullia.current{}/* Class *ul { } /* Tag */ullia{}/* Tag */*{}/* Universal (Slowest) */#content[title='home']/* Universal */因为浏览器从右往左读，#main-nav > li {} 这一句即使用到了 id 选择器，实际效率却不会提升多少。
第三，不需要这样写 ul#main-navigation {}，因为 ID 已经是独一无二的了，同理，tag 也要尽可能地避免与 class 一同使用。
第四，后代选择器是性能最差的，尤其是后代中包含 tag 或者 universal 选择器，比如 html body ul li a {} 简直是一场灾难。
第五，浏览器如果发现某个选择器不能匹配任何元素，将会立即终止尝试，开始匹配下一个选择器，从而提高执行效率。
第六，重新思考一下为什么要这样写，是不是还有优化的可能呢？比如利用元素的继承性可以省下很多不必要的设定。
第七，如果很在意性能，尽量少用 CSS3 选择器。
CSS性能二：
虽然自己只是入门水平会写简单的页面，但本着“取法乎上，得乎其中”的原则，一直关注 CSS 性能，读过几篇相关文章，准备逐步翻译出来当做总结与积累。第一篇 Why you should care about CSS page performance 由 Doug Stewart 发表于 2012 年 5 月。以下只摘录几点重要的信息，没有直接翻译，理解不当的地方还请大家指正。
Doug 介绍了自己测试 CSS 性能的两个方法：缩放浏览器窗口与上下滚动页面。浏览器重绘页面可以反映很多关于性能的问题，未添加 CSS 的页面反应速度肯定是最快的。一般来说，如果页面缩放时有明显延时，很可能是布局问题，比如浮动、流体宽度等等，而如果页面滚动时有明显延时，则可能是特效问题，比如说阴影与渐变。
优化 CSS 性能，自然要先找到问题出在哪里。作者介绍了三款衡量页面性能的工具：CSS Stress Test，Chrome Developer Tools 的 Profiles 与 Timeline。就不一一介绍这些工具了，原则上是找出最耗时间的地方，然后想办法优化。
作者给出的 CSS 性能小提示： 1. 大家都知道 id 选择器的表现效果要优于 class，事实虽然也如此，但仅仅是非常微小的差别，几乎可以不予考虑； 2. CSS3 属性往往是影响页面性能的罪魁祸首，尤其是 animation 与 @font-face，谨慎地使用； 3. 现代浏览器支持 Javascript 与 Flash 硬件加速，却不支持 CSS， 虽然 webkit 有优化功能，但还是受限的； 4. 移动平台的情况是，即便现在最先进的手机也不及 10 年前最先进的电脑; 5. 人脑有大约 80 毫秒的反应时间，优化页面性能时不要在一些细枝末节的地方花太多精力，专注于拖慢严重的地方。
