养成好的前端习惯

     雅虎前端优化准则相信大家都知道。我接触前端的工作也有一段时间了，现在我也谈谈我理解的基于雅虎前端优化准则的优化经验，这是平时工作可以很容易做到的技巧，同时也为自己的学习做个记号。

1.减少Http请求

此项工作所需工具：firebug、yslow（都是firefox插件），httpwatch，photoshop

首先介绍一下yslow，yslow可以查看一个页面的js、css、图片和html本身等的资源的情况，包括大小、数量，还有它会给出优化你网站的建议。使用css sprite，合并一些图片按钮的素材可以大量减少css的图片请求。

详细了解yslow：http://www.williamlong.info/archives/985.html

理解css sprites：http://baike.baidu.com/view/2173476.htm

2.精简js和css

在apache服务器端开通了gzip的功能后，那传送到客户端的css、js和html会有明显的压缩，但是你可以做得更好。就是可以用一些工具（例如YUI Compressor 和 Closure Compiler）去压缩js和css，还有一些在线的网站也提供了类似的功能。不过压缩后的代码会变得很难读，最好压缩之前备好份。

gzip相关的资料：http://woshao.com/article/0639bc30165f11dfa592000c295b2b8d/

3.优化网站图片和swf

总的来说颜色多、表现力丰富照片用jpg格式，一些颜色相近的css sprites素材图片宜用png格式。图片和swf资源在不影响外观的情况下尽可能压缩一下，一般时候优化的效果是很显著的。

图片优化相关资料：淘宝UED《图片格式与设计那点事儿》：http://ued.taobao.com/blog/2010/12/10/jpg_png/

雅虎yslow  Smush在线图片压缩工具：http://www.smushit.com/ysmush.it/

4.外链css文件放在head部，脚本文件放在底部

==================================================

作者：绿色花园

出处：http://www.cnblogs.com/cos2004/archive/2011/03/10/1979824.html

==================================================