Loving Coding & Visual Design

压缩网页

前面Google统计信息对 网页优化的建议提到网页压缩技术，有朋友mimicangel不是很明白，下面我就对网页压缩技术进行一下详细的介绍。

网页压缩指的是网页以及网页包含的所有文本文件及二进制文件的压缩，文本文件主要包括网页本身、CSS、Javascript、XML等文件，而二进制文件主要包括图片文件、图标文件、Flash等视频文件。根据压缩方法不同，我们可以把网页压缩分为三类：

  1. 图片等二进制文件的压缩
    图片的压缩一般可以通过Photoshop等图片处理工具进行压缩，视频的压缩可以可以根据不同的视频格式搜索视频压缩工具，例如大部分视频网站使用的FLV格式可以用Adobe Flash Media Encoder 来进行压缩生成，这些都是属于软件的使用问题，就不再详述。

  2. HTML、XML、CSS、JS文件的Gzip压缩
    我们浏览器看到的网页等其它文本文件都是通过服务器生成的，有些服务器是直接保存的服务器上面的，服务器只需要读给我们，我们就可以称之为静态页面；相反文件在服务器上不存在，而是经过程序生成的网页，我们称之为动态网页。不管是静态还是动态，这些文本的网页文件都可以用Gzip这种技术来压缩，如果我们的浏览器同时支持Gzip压缩的格式，那么我的访问网页的速度将得到较大提升。可以放心的是目前的主流浏览器均支持这种压缩技术，为了更加保险，我们可以用程序检测浏览器是否支持Gzip压缩，然后根据结果判断是否压缩网页、CSS以及JS等文件。

  3. CSS和Javascript等语法的压缩
    熟悉CSS和Javascript的朋友应该知道，在语法上，我们是有很大余地去简化语法和删除多余的空格和换行符的。例如：
    font-size:12px; line-height:17px; font-family: Arial, Helvetica, sans-serif;
    我们可以简化为：
    font:12px/17px Arial, Helvetica, sans-serif;
    这样我们可以通过精简文字达到压缩文本文件的目的。所以说Web2.0推崇的DIV+CSS的网页设计模式也可以理解为一种压缩网页的方法。


方法说完了，下面我推荐一些CSS和Javascript文件压缩工具给不熟悉HTML和程序的朋友，需要说明的是：压缩工具主要适用于CSS和Javascript文件，HTML网页的简化和压缩还是需要专业人士的参与。

CSS

Javscript



下一页

最 近 文 章

  1. Digital Point的Adsense帐户被停用 - Tue, 20 Jul 2010 05:30:39 +0000
  2. 给Discuz7增加修改用户名的功能 - Tue, 20 Jul 2010 16:34:50 +0000
  3. Google加大对关键字的相关性研究 - Sun, 18 Jul 2010 16:38:24 +0000
  4. 我看网站的优质链接 - Sat, 17 Jul 2010 15:50:24 +0000
  5. 如何屏蔽不喜欢的Adsense的Flash版广告 - Tue, 03 Aug 2010 08:54:34 +0000
  6. 英文Google无法搜索怎么办？ - Thu, 15 Jul 2010 10:19:22 +0000
  7. WebGL Resources - Wed, 14 Jul 2010 16:57:31 +0000
  8. 推荐几个我常用的网站工具 - Tue, 13 Jul 2010 16:47:10 +0000
  9. Google统计信息对网页优化的建议 - Mon, 12 Jul 2010 15:22:07 +0000
  10. Twitter月搜索量达240亿，堪称Google第二 - Fri, 09 Jul 2010 06:33:58 +0000