1. 把css放在head区
Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk.
由于页面中所有css下载并解析完成之前, 浏览器不会开始渲染页面, 又<head>中的内容下载、解析完成之前浏览器不会开始解析body,所以将css放在head区是个好方案。
2.避免使用 css @import
以前在网上看到这条建议时，给的原因是说这样做相当于把css放在了页面底部，关于这种说法我一直很迷惑,为什么@import就相当于放到底部了?直到前几天在google developers看到下面这句话, 才知道真像并不是这样的：
When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if first.css contains the following content: @import url("second.css"), The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.
上面这段句的大致意思: 当外联的css文件中(这里我们假设是a.css)使用了@import指令(假设import的是b.css)时, 浏览器必须要等到a.css下载完成后解析它的过程中才能发现还有一个b.css需要下载, 于是去下载b.css, 而a.css中的其余代码也必须要等到b.css下载并解析完成后才能被解析. 这一来一去就降低了页面的渲染速度.
如果a.css和b.css都采用外联的方式引入, 则二者可以并行下载, 这样可以提升页面渲染速度, 在页面中包括数十个css时尤其明显.
3. 去除不必要的css
网站公用的样式通常会被提到一个通用的css文件中，然后被多个页面引用，随着这个common.css越来越大，它的很多内容都是某个具体的页面所用不到的。对于这种情况，建议将common.css按功能拆分成几个小文件，然后按需引用。
4.避免使用css expression, filter等IE属性
css expression会在页面任何事件发生时重新计算、执行，所以很消耗资源，并且只有IE5-7支持，IE8中已废弃。等效的兼容方案可采用js实现。
posted on
