css与性能的有关知识

最近再研究有关css对网站性能的影响，学习css也有一段时间了，平时的确不怎么注重css对性能的影响，但是随着项目的不断更新，越来越多的功能的加入，让样式表越来越庞大，这时候，就不得不考虑性能了。自己在这段时间里，整理了一些有关css对性能有关的一些知识，参考了很多其他网站上的知识，在这里做一个总结，方便自己以后查看吧。

1、为什么把css文件放到头部

浏览器在所有的stylesheets加载完之后，才开始渲染整个页面的。在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把样式表放到头部的原因。如果放在底部，页面渲染就不仅仅是等待stylesheets的加载，还要等待html内容加载完成，这样一来，用户看到的页面会更晚。

2、为什么要强调，避免使用@import引入样式表

对于 @import 和 <link> 两种加载外部 CSS 文件的方式：@import 就相当于是把 <link> 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令。

3、避免使用Expression

Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

4、避免使用 Filter

IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况，最好的解决办法就是使用 PNG8。

5、css缩写

css缩写可以让你用极少的代码定义一系列样式属性，这种做法可以极大程度的缩减代码量已达到提高性能的目的。

缩写：color、margin、padding、

border：width style color

background：color image repeat attachment position

list-style:type position image

 当然还有很多，具体的就要大家自己去查阅了

6、css选择器

子集： #toc > li {font-weight: bold}

按照我们惯常的理解，编译器应该是先查找 id 为“toc”的节点，然后在他的所有直接子节点中查找类型（tag）为“li”的节点，将“font-weight”属性应用到这些节点上。

但是，不幸的是，恰恰相反，浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的。这里，浏览器首先会查找页面上所有的“li”节点，然后再去做进一步的判断：如果它的父节点的 id 为“toc”，则匹配成功。

由此可知，CSS 选择器的匹配远比我们想象的要慢的多，CSS 的性能问题不容忽视。

派生： #toc  li {font-weight: bold}

这个效率比之前的“child selector”效率更慢，而且要慢很多。浏览器先便利所有的“li”节点，然后步步上溯其父节点，直到 DOM 结构的根节点（document），如果有某个节点的 id 为“toc”，则匹配成功，否则继续查找下一个“li”节点。

通用符： [hidden="true"] { ... } /* A universal rule */

这里的匹配规则很明显：查找页面上的所有节点，如果有节点存在“hidden”属性，并且其属性值为“true”，则匹配成功。这是最耗时耗力的匹配，页面上的所有节点都需要进行匹配运算，这种规则应尽量避免。

id归类：

 button#goButton {...};----->>#goButton

 .fundation#testIcon {...};----->>#testIcon

这里，按照我们常规的理解，箭头左边的写法似乎是应该更快的，因为它的限制更多。其实不然，id 是全局唯一的，在匹配 CSS 选择器时浏览器定位到 id 是最快的，如果伴随有其他的非 id 的 selector，反而会影响匹配的效率。

class归类：

 button.indented {...}----->>.button-indented {...}

程序员们经常会给某个 Class 前面加上标签名称（Tag Name），以更精确且快速的定位该节点，但是这样往往效率更差。和清单 8 中的原理一样，页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免由于开发修改页面元素的类型（Tag）而导致的样式失效的情况，做到样式与元素的分离，两者独立维护。

尽量较少规则数量

Span[mailfolder="true"] > table > tr > td.columnClass {...} -----》

.span-mailfolder-tbl-tdCol {...}

规则越多，匹配越慢，上面一种规则需要进行 6 项匹配，先找“columnClass”，再找“td”，然后是“tr”，“table”，最后是符合“mailfolder”为“true”的 span，这种效率是非常慢的。如果用一个比较特殊的 class 替代（span-mailfolder-tbl-tdCol），效率会快上好几倍。

尽量避免使用派生类选择器

 treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}

Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用child 选择器替代就应该尽量这样去做。

利用 CSS 的继承机制

 Color、Font、Letter-spacing、Line-height、List-style、Text-align、Text-indent、 Text-transform、White-space、Word-spacing

 #bookmark  > .menu-left {list-style-image: url(blah)}---------->>>

 #bookmark  {list-style-image: url(blah)}

在 CSS 中，有很多 CSS 的属性以可以继承的，如果某个节点的父节点已经设定了上述的 CSS 样式（如：color, font 等 ...），并且子节点无需更改该样式，则无需再作相关设定，同时，也可以利用这一点：如果很多子节点都需要设定该 CSS 属性值，可以统一设定其父节点的该 CSS 属性，这样一来，所有的子节点再无需做额外设定，加速了 CSS 的分析效率。

7、css的书写书序

 网页中的图片，如果没有设置width和height，图片在图片载入之前，它所占的空间为0，但是当它加载完毕之后，那块为0的空间突然被撑开了，这样会导致，它下面的元素重新排列和渲染，造成重绘和回流。所以我们在写css的时候，把元素的定位放到前头，首先让浏览器知道该元素在文本流内还是外，具体在页面的那个部位，接着让浏览器知道他们的宽度和高度、border等这些占用空间属性，其他的属性都是在这个固定的区域内渲染的。