快速提高网站性能三步骤【操作篇】

?

本文从前端开发角度介绍提高网站性能的三个简单方法，操作简单，却可以迅速提高网站性能。

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 ($) {

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