CSS 性能优化技巧

作为指导浏览器如何渲染页面样式的部分，CSS 的性能对页面整体性能的影响是巨大的。在这篇文章中，我们共同来讨论如何对 CSS 进行优化，实际上，其中所有的手法都并不复杂，关键在于多在实战中实施，并深刻了解优化与未经优化的差异。另外，在这个过程中合理利用一些工具能够对我们 产生莫大的帮助。Google 的 Page Speed和 Yahoo 的YSlow都是不错的选择，两者均是基于 Firebug 的插件。在这篇文章中，我们主要使用到的是 Page Speed 进行演示。

1. 合理使用 CSS Sprite 和 DataURI

CSS Sprite 相信大家已经非常熟悉了，把 CSS 中用作背景的图片拼合成一张图，然后通过 background-position 来设定显示的具体位置。这种手法对于减少 HTTP 请求数非常地见效，但是并不是所有的图片都适合做成 Sprite，例如一个需要平铺的背景。另外，CSS Sprite 的另一个问题是难以维护与更新，试想修改一堆小图拼成的大图，肯定比修改单个小图片费劲得多，所以在拼合成大图前，精心的设计是不可缺少的一个环节。DataURI是一种将小文件嵌入文档的方案，一个例子如下：

    body {

            background: url(data:image/gif;base64,gif图片编码);

    }

DataURI 的主要目的同样是为了减少 HTTP 请求数量，但事实上使用这项技术需要非常的谨慎，DataURI 有足够的缺点让开发者放弃它，首先，浏览器需要较普通图片数倍数十倍的开销将编码转成图片并呈现出来；其次，编码的图片无法被重复使用，这意味着在一个页 面中，想要多次使用该图片，就需要将编码多次copy；最后，上面的方式对于 IE6/7 并不适用，为了全面兼容，需要为他们添加 Hack，这意味着需要双倍的代码量，真是得不偿失。

2. 压缩 CSS 与使用简码书写 CSS

这两个技巧的目的在于使 CSS 文件变得更小。压缩 CSS 是去掉对开发人员有用而对浏览器无用的空格符，甚至是换行符，对于此项工作，推荐使用 YUI 的 Compressor，这是一个命令行模式的 JAVA 小程序，适合于将其添加到你的自动部署流程中。它的使用非常的简单，下面的一行命令行将压缩 a.css 并输出到 a.min.css

    java -jar yuicompressor.jar a.css -o a.min.css

事实上 YUI compressor 真正强大的地方在于对 javascript 的压缩，有兴趣的朋友可以去看看文档。下面这张图片展示了压缩前的 a.css 和压缩后的 a.min.css 的对比，可以看到，YUI compressor 去掉了所有不需要的空格符和换行符，压缩率约为 37%（视情况而定）

有的朋友可能因为种种原因，并不具备自动化部署的条件，那么使用 YUI compressor 可能就稍显麻烦了，这种情况推荐使用前面说到的 Page Speed，如果你的 CSS 文件未经压缩，Page Speed 将会在 minify css 项给出一个红色的警告，展开选项，可以看到 Google 已经为你准备好了压缩版本，可以选择查看或者另存，非常的方便。（如下图）

关于 CSS 简码的书写，则非常简单了，非常多的属性都可以使用简写来表示，如果这种写法成为习惯，你会发现减小 CSS 文件大小是多么顺其自然的事:

    body {

        background:url(images/bg.png) repeat #369 center center;

        padding:5px 10px;

        margin:5px 10px;

        font:bold 18px Arial;

        border:1px solid #ccc;

    }

3. 使用效率更高的选择器

很多开发者都有 HTML 洁癖，甚至不愿意给元素标记更多的 id 或 class，但这带来的副作用就是在 css 中使用的选择器过于复杂：

    #nav li a {...}

    #footerWrapper #footer .column p {...}

    ul > li > a {...}

    form#login {...}

上面的例子都是效率比较低下的选择器，大量使用低效选择器将会对页面渲染造成性能影响。事实上，Google 推荐我们使用更为简洁的选择器，用 id 或 class 直接指向元素，后代选择器当然是非常好用的，但是最好不要超过2层。如果你使用的选择器有不合乎 Google 推荐的情况，在 Page Speed 中会有具体的提示，展开 Use efficient CSS selectors 项，每一个低效的选择器都被按严重程度罗列出来。

4. 避免使用滤镜和表达式

这一条是仅针对 IE 而言，IE 浏览器可以解释 CSS 中的 filter 和 expression ，尽管它们在有的时候非常有用，但是副作用也是不得不考虑的。例如，当我们使用 filter 引用一个透明 png 图片时，这个图片的加载会阻塞浏览器，此时浏览器不会做其他任何操作，包括加载其他资源和渲染页面；另外，当这个 png 图片被加载之后，无法像其他图片一样被缓存，这意味着每次页面的刷新都会重新请求并下载该图片。而使用 expression 会大大降低渲染页面的效率也是众所周知的事情。最后多说一句， expression 对于 IE8 来说，只在兼容模式(compatibility mode)下有效。