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

 

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

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