CSS 性能

浏览数：10 / 时间：2015年06月09日

作者给出的 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 */