前端优化的一些地方(JS/CSS/图片)

最近翻了翻，总结一下

[b]一.督促你的客户选用更快的浏览器，这样才能体验到更快的加载速度！[/b]
具体什么的就不说了，上一张图，下图为Gomez收集了200个网站的18.6亿个别值，时间范围为1个月，得出的真实上网环境中的数据。图中蓝色代表网页加载速度，绿色代表渲染时间。

[img]http://dl.iteye.com/upload/attachment/0078/8502/e6a82064-41a4-3a19-9021-ad84cc2e678e.jpg[/img]


[b]二.Javascript的优化[/b]
1.用Firebug查找执行消耗时间最长的Javascript函数。
可通过Firebug控制台中的概括叶卡，查看函数的调用时间及花费的时间。如果某个函数花费异常高的时间，你就应该和JS开发人员好好谈谈了。


[img]http://dl.iteye.com/upload/attachment/0078/8513/ad0530c9-8858-3fb3-8fcb-a98f60cd897a.png[/img]


2.将JavaScript做成外部文件并进行精简。
这样不仅利于代码的维护，将其做成外部文件则浏览器未对其进行缓存，避免代码的多次请求。JavaScript的精简就不用说了，jquery精简以后从252KB到32KB极大减少了数据请求量。精简主要包括移除文件中的空白空间和注释、缩写变量及删除无用代码等。在此推荐两个JS精简的工具，一个是yahoo的YUI Compressor ，另一个是Google的Closure Compiler，两者皆需Java环境执行。

3.如果可以，将JavaScript放置于HTML文件底部。
第一个原因是浏览器遇到<script>标签时，会中断当前页面的进一步显示而进行JavaScript的解释，第二个原因JavaScript的下载是独占，堵塞浏览器的并行下载。

4.Ajax用GET方式而不用POST方式。
因为POST请求分两个步骤请求数据，第一发送头，第二发送数据，而GET则只用一次进行。

[b]三.CSS的优化[/b]
1.将CSS样式放在HTML文档头部。
因为CSS样式后面的会覆盖前面的，有些浏览器在css完全输出之前不会去渲染任何东西.........

2.精简CSS文件
这个和JS的精简一样，在此举个例子

#header { 
　　 margin-top:10px; 
　　 margin-right:15px; 
　　 margin-bottom:10px; 
　　 margin-left:15px; 
　　 backgroung-color:#333333; 
　　 background-images:url(Images/header.jpg); 
 } 

可以精简成下面的形式：

#header{margin:10px 15px;background:#333 url(Images/header.jpg);} 

[b]四.图像的优化[/b]
1.使用所要求的图像大小，而不是在HTML中使用宽度和高度属性重新调整图像尺寸.

2.正确使用图像格式
一般使用GIF做页面的徽标、小图标，用JPEG呈现照片和高品质的图像，其他的一切图像均使用PNG格式

3.图像压缩
在此介绍一下yahoo的Smush.it，网址http://www.smushit.com/ysmush.it/，Smush.it可以大幅压缩(例子是减少了0.40%.............)图片，并且它还是一个无损的压缩工具，它通过移除图片中的无用信息来达到无损压缩图片的目的，既减少了图片的体积，又不会对图片质量造成影响。

[img]http://dl.iteye.com/upload/attachment/0078/8511/3b0e27fc-f11a-3e8e-b297-37d70dff4855.png[/img]