快速提高网站性能三步骤【操作篇】
本文从前端开发角度介绍提高网站性能的三个简单方法，操作简单，却可以迅速提高网站性能。
1、图片无损压缩
通常图片占据一个网页加载的大部分流量，从图片下手优化网站会得到意想不到的。
<1>首先，压缩成适合页面显示的适当尺寸。
例如现在有一个256 x 256px的苹果图片，而网页上只需要显示为150 x 150px大小，那就把图片压缩到150 x 150px，这样会压缩很多字节。
压缩前（尺寸：256 x 256px， 大小：68KB） 压缩后（尺寸：150 x 150px， 大小：36.2KB）
压缩结果：压缩为原始大小的：53%
差异：除非放大页面，否则两张图片显示上没区别。
推荐软件：Microsoft Office自带Picture Manager就可以压缩，这类软件太多Google搜搜就出来了。
<2>其次，通过图片无损压缩软件优化图片大小。
无损处理前（尺寸：150 x 150px， 大小：36.2KB） 处理后（尺寸：150 x 150px， 大小：24.2KB）
压缩结果：
使用Yahoo Smush.it压缩，居然节省了33.11%流量，效果明显！
差异：视觉上基本无差异。
推荐软件和在线应用程序：
1、【云应用】 Yahoo Smush.it（http://www.smushit.com） 支持批量压缩
如果你是个云爱好者或者有洁癖，不喜欢在电脑上安装一大堆软件让系统变得乱糟糟，Yahoo Smush.it是很好的选择。不知国内的网速是否给力......
2、【桌面软件】PNGGauntlet （http://pnggauntlet.com/） 支持批量压缩
如果网速不给力，无力在云里飘来飘去，这个桌面软件是不错的选择。 百度空间里有篇使用介绍：PNG压缩工具PNGGauntlet
2、Javascipt压缩
Javascript压缩不仅可以达到节省空间的效果，还可以混淆JS代码，让你的JS代码无法被别人阅读，当然我崇尚开源鄙视加密代码的行为。 例如：JS文件很大时压缩效果很明显：jQuery 1.7.2版压缩前247KB，压缩后93KB。
以下为quicksand插件压缩前后对比。
压缩前的JS代码(function ($) {
$.fn.quicksand = function (collection, customOptions) {
var options = {
duration: 750,
easing: 'swing',
attribute: 'data-id', // attribute to recognize same items within source and dest
adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
useScaling: true, // disable it if you're not using scaling effect or want to improve performance
enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
selector: '> *',
dx: 0,
dy: 0
};
$.extend(options, customOptions);
//...... 省略 ......
压缩后的JS代码
(function(a){a.fn.quicksand=function(b,c){var e={duration:750,easing:"swing",attribute:"data-id",adjustHeight:"auto",useScaling:true,enhancement:function(a){},selector:"> *",dx:0,dy:0};a.extend(e,c);
//...... 省略 ......
推荐在线应用程序
在线Javascript压缩工具：Online Javascript Compression Tool
3、CSS压缩
CSS压缩与Javascript压缩操作相似，压缩效果客观。CSS压缩虽然可以起到视觉混淆的效果，但只需要通过浏览器就可以读到清晰地CSS代码。
压缩前的CSS代码
/* --------------------------------------------------
SiteName : 祁有此理
FileName : common.css
Update : 2012/05/28
-------------------------------------------------- */
/* --------------------------------------------------
Reset Style
-------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html{overflow-y:scroll;}
body{
font-size:85%;
text-align:center;
line-height:1.5;
font-family:Arial, Osaka, Helvetica,Geneva,sans-serif;
margin:0 auto;
background:#252d36;
}
//...... 省略 ......
压缩后的CSS代码
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}html{overflow-y:scroll}body{font-size:85%;text-align:center;line-height:1.5;font-family:Arial,Osaka,Helvetica,Geneva,sans-serif;margin:0 auto;background:#252d36}
//...... 省略 ......
推荐在线应用程序
在线CSS压缩工具：CSS Compressor
链接：
个人站点：www.tarobjtu.com
个人站点博客：www.tarobjtu.com/blog