`
firedragon
  • 浏览: 72069 次
  • 性别: Icon_minigender_1
  • 来自: 广西
文章分类
社区版块
存档分类
最新评论

[转帖]利用压缩网页来提升网站浏览速度

阅读更多

原帖地址:http://www.ibm.com/developerworks/cn/web/wa-lo-webcompress/index.html

 

级别: 中级

刘 冬 (javayou@gmail.com), 开发工程师,  

2007 年 2 月 28 日

本文主要介绍如何通过对页面进行压缩从而节省网站的带宽以及提升用户的访问速度。

<!----><!----><!---->

网站的访问速度是由多个因素所共同决定的,这些因素例如应用程序的响应速度、网络带宽、服务器性能、与客户端之间的网络传输速度等等。其中最重要的一个因素是应用程序本身的响应速度,因此当你为网站性能所苦恼时,你第一个需要着手进行处理的便是尽可能的提升应用程序的执行速度,你可以使用缓存或者是优化代码的执行效率来提升应用程序的速度。

但是,本文并不是介绍如何来提升应用程序的执行效率,前面提到的只不过是为了防止您病急乱投医。在确保您的应用程序的性能已经达到足够好,同时服务器的性能也完全满足的情况下,不妨来试试网页压缩来进一步提升网页的浏览速度,而且非常重要的是,它完全不需要任何的成本,只不过是会让您的服务器CPU占用率稍微提升一两个百分点而已或者更少。

网页压缩是一项由 WEB 服务器和浏览器之间共同遵守的协议,也就是说 WEB 服务器和浏览器都必须支持该技术,所幸的是现在流行的浏览器都是支持的,包括 IE、FireFox、Opera 等;服务器有 Apache 和 IIS 等。双方的协商过程如下:

  1. 首先浏览器请求某个 URL 地址,并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate,表明浏览器支持 gzip 和 deflate 这两种压缩方式(事实上 deflate 也是使用 gzip 压缩协议,下面我们会介绍二者之间的区别);
  2. WEB 服务器接收到请求后判断浏览器是否支持压缩,如果支持就传送压缩后的响应内容,否则传送不经过压缩的内容;
  3. 浏览器获取响应内容后,判断内容是否被压缩,如果是则解压缩,然后显示响应页面的内容。

在实际的应用中我们发现压缩的比率往往在 3 到 10 倍,也就是本来 50k 大小的页面,采用压缩后实际传输的内容大小只有 5 至 15k 大小,这可以大大节省服务器的网络带宽,同时如果应用程序的响应足够快时,网站的速度瓶颈就转到了网络的传输速度上,因此内容压缩后就可以大大的提升页面的浏览速度。

接下来我们介绍几种常用的环境下如何启用网页压缩功能。

纯 Tomcat 服务器

如果您的 WEB 应用程序是跑在 Tomcat 服务器下的,而且直接使用 Tomcat 所提供的 HTTP 服务,那建议你马上动手,因为实在是太简单了,你只需要在 server.xml 配置文件中给 HTTP Connector 增加一个 compression 的参数值为 on 并重启 Tomcat 服务器就立刻生效,配置如下:

    <Connector port="8080" protocol="HTTP/1.1" 
               maxThreads="150" connectionTimeout="20000" 
               redirectPort="8443" compression="on"/>

Tomcat 采用的是 HTTP/1.1 的 GZIP 压缩协议,它会根据浏览器送过来的请求中的 accept-encoding 值是否包含 gzip 来判断浏览器是否支持 gzip 压缩协议,如果浏览器支持就启用 gzip 压缩,否则就不进行任何压缩处理。Tomcat 中还有另外一个参数 compressableMimeType,这个参数可以用来指定压缩哪种类型的内容,例如可以指定该配置值为:text/html,text/plain ,则只压缩 contentType 为 text/html 和 text/plain 的页面,不过您最好也将 css 和 javascript 文件也算在压缩的文件类型中,因为这两者的压缩效果也十分的明显。


 

Apache 服务器

在 apache 1.3 版本,大家常用 mod_gzip 对输出内容进行压缩,现在主流的浏览器都支持 gzip 解压缩。在 apache2 下,这个模块换名为 mod_deflate,对应的模块文件名是 mod_deflate.so。mod_gzip 本文不做介绍,下面描述一下在 Apache 2 下如何启用并配置 mod_deflate 模块。默认安装的 Apache 不管是 Windows 还是 Linux/Unix,都是不启用该模块的, Linux/Unix 下甚至不带该模块,你需要手工编译这个模块。

下面我们分别介绍在 Windows 和 Linux 操作系统下如何启用并配置 mod_deflate 模块。

在 Windows 下采用安装程序安装的 Apache 服务器已经带有 deflate 所需要的模块 mod_deflate.somod_headers.so,我们只需要在 httpd.conf 配置文件中启用并进行相关的配置即可,配置如下:

LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
<Location />
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>

而如果是 Linux/Unix 操作系统,如果你没有在编译安装的过程中将所需要的两个模块 mod_deflatemod_headers 编译进去的话,那就稍微有点麻烦,首先我们先看如何在编译安装 Apache 过程中也同时编译这两个模块,请在执行 configure 程序时增加两个参数分别是:

# ./configure --enable-deflate --enable-headers

这样在编译完 Apache 后就可以直接在 httpd.conf 中启用并配置 deflate 模块了,配置的方法跟 Windows 平台下是相同的。

如果说您的 Apache 已经在运行了,不想再重新编译一次,那也可以选择只编译 deflate 模块所需的文件 mod_deflate.cmod_headers.c。这两个文件位于 {apache-src}/modules/filters/ 目录下(其中 {apache-src} 为 apache 源文件所在的目录)。使用如下命令来单独编译这两个源文件。

# {apache-bin}/apxs -i -a -c {apache-src}/modules/filters/mod_deflate.c
# {apache-bin}/apxs –i –a –c {apache-src}/modules/filters/mod_headers.c

其中 {apache-bin} 为 Apache 安装目录下的 bin 目录,接下来在 httpd.conf 直接配置该模块即可。

很多时候你在单独编译 deflate 模块的时候可能会碰到编译错误,提示是:

Cannot load /opt/apache/modules/mod_deflate.so into server: /opt/apache/modules/mod_deflate.so: undefined symbol: deflate

解决的方法如下:

编辑 /usr/local/apache2/bin/apr-config 文件修改其中的 LDFLAGS 值为 "-lz",然后再重新编译 mod_deflate 模块,apxs -ica mod_deflate.c 即可。

为了省却不必要的麻烦,请尽量在编译安装时直接加上 --enable-deflate --enable-headers 参数。


IIS 服务器

微软的 IIS 服务器同样也是目前用得最多的 WEB 服务器之一,而且用来运行 ASP 页面也是必不可少的。IIS6 本身支持 gzip 压缩,IIS5 就比较费劲了,你可以找一些第三方的组件来处理,例如 httpzip,网址是:http://www.port80software.com/products/httpzip/?vid=3354166,不过这玩意是收费的。接下来我们介绍如何在 IIS6 中启用压缩功能。

打开 Internet 信息服务(IIS)管理器,右击"网站"->"属性",选择"服务"。在 "HTTP压缩" 框中选中 "压缩应用程序文件" 和 "压缩静态文件",按需要设置 "临时目录" 和 "临时目录的最大限制",如下图所示:


图1 设置网站属性
图1 设置网站属性

接下来配置 gzip 组件,在 Internet 信息服务(IIS)管理器,点击 "Web 服务扩展"->"增加一个新的 Web 服务扩展...",在 "新建 Web 服务扩展" 框中输入扩展名 "HTTP Compression",添加 "要求的文件" 为 C:\WINDOWS\system32\inetsrv\gzip.dll,选中 "设置扩展状态为允许",如下图所示:


图2 设置 Web 服务扩展
图2 IIS 设置 Web 服务扩展

图3 新建 Web 服务扩展
图3 新建 Web 服务扩展

还没完呢,我们还需要修改一个配置文件,修改之前请先停止 IIS 服务,打开 C:\Windows\System32\inetsrv\MetaBase.xml,这个文件很大,找到下面一段信息:

<IIsCompressionScheme	Location ="/LM/W3SVC/Filters/Compression/gzip"
		HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
		HcCreateFlags="1"
		HcDoDynamicCompression="TRUE"
		HcDoOnDemandCompression="TRUE"
		HcDoStaticCompression="TRUE"
		HcDynamicCompressionLevel="0"
		HcFileExtensions="htm
			html
			txt"
		HcOnDemandCompLevel="10"
		HcPriority="1"
		HcScriptFileExtensions="asp
			dll
			exe"
	>
</IIsCompressionScheme>

增加一些要进行压缩的文件后缀,其中 HcFileExtensions 是静态文件的扩展名,增加 js 和 css 等;HcScriptFileExtensions 为动态文件的扩展名,增加 aspx,保存后启动 IIS 即可生效。

最后我们介绍如何来测试前面所做的工作是否起效,你可能会觉得很奇怪,配置好了,用浏览器打开页面正常,查看页面源码,内容并没有变化,大小也跟原来一样,怎么回事呢?这是因为浏览器已经把内容解压了的结果,有两个方法来判断压缩是否生效:第一,查看 WEB 服务器的日志,不管是 Apache 或者是 IIS,二者的访问日志格式都差不多是下面这种格式:

127.0.0.1 - - [14/May/2006:08:44:28 +0800] "GET /manual/style/css/manual.css HTTP/1.1" 200 19351

最后两个数字分别是 HTTP 的结果码(200 表示 OK),19351 表示的是响应内容的大小,把这个大小跟你在浏览器上查看源码的大小比较一下就可以知道是否生效。另外一种方法就是自己写一个 HTTP 客户端的小程序并设置 Accept-Encoding 的值为 gzip,deflate,由这个程序去请求服务器端的某个 URL 地址,然后打印出响应的内容,如果是一堆乱码,恭喜你,配置成功。下面是一段 Java 写的测试客户端代码(需要用到 commons-httpclient 包):

HttpClient http = new HttpClient();		
String url = "http://www.dlog.cn/javayou";
GetMethod get = new GetMethod(url);
try{
	System.out.println("fetching url : "+ url);
	get.addRequestHeader("accept-encoding", "gzip,deflate");
	int er = http.executeMethod(get);
	if(er==200){
		System.out.println(get.getResponseContentLength());
		String html = get.getResponseBodyAsString();
		System.out.println(html);
		System.out.println(html.getBytes().length);
	}
}finally{
	get.releaseConnection();
}


结论

以上是目前比较流行的两个 WEB 服务器软件以及 Tomcat 服务器对于页面压缩的配置方法;其他的一些 J2EE 应用服务器如果不支持这个功能的话可以考虑利用过滤器(Servlet Filter)来进行处理,具体的代码以及配置方法可以参考 Resin 服务器所提供的文档。但是有一点需要提醒各位读者的是,本文介绍的访问只是在服务器本身的响应速度已经足够优化的情况下进行,也就是说在带宽成为系统瓶颈的时候才来考虑该方案。

分享到:
评论

相关推荐

    轻松转帖之突破网页复制限制宣贯.pdf

    对于火狐浏览器,用户可以编写或安装UserScript(如New Anti-Disabler),这段JavaScript代码可以在用户访问任何网站时自动运行,以取消网页的右键和文本选择限制。安装Greasemonkey扩展后,用户只需重启Firefox并...

    论坛转帖工具.rar

    标题中的“论坛转帖工具.rar”表明这是一个用于在论坛之间转移帖子的软件工具,通常用于帮助用户方便地将一个论坛的帖子内容复制到另一个论坛,可能是为了分享信息、讨论或保存重要的帖子。这类工具可能包括自动抓取...

    贴吧转帖工具

    通过这款工具,用户可以实现一键转帖和一键8经验签到的功能,极大地简化了传统操作流程,节省了用户的时间,提升了用户体验。 一键转帖功能是该工具的核心亮点。它允许用户快速地将一篇帖子从一个贴吧复制并发布到...

    [转帖]通过WebView获取访问网页的源代码

    有时,我们可能需要获取用户通过WebView浏览的网页源代码,以便进行进一步的数据分析或者实现特定功能。这篇博客(原文链接:https://dai-lm.iteye.com/blog/1158470)讨论了如何在Android中通过WebView获取网页源...

    遍历网页的一段Delphi代码(转帖)

    根据给定的信息,本文将对一段用于遍历网页的 Delphi 代码进行解析与说明,以便读者能够深入了解其工作...理解这段代码的工作原理不仅有助于提升编程技能,还能帮助开发者更好地利用 Delphi 进行 Web 自动化项目开发。

    WebZipV7.0.3.1030下载整个网站离线浏览汉化绿色版

    转帖到百度知道(简约) 转帖到百度知道(专业) 复制到博客 下载帮助 软件简介 WebZip 把一个网站下载并压缩到一个单独的 ZIP 文件中,可以帮您将某个站台全部或部份之资料以ZIP格式压缩起来,可供你日后快速浏览这个...

    转帖几个网站Banner的FLA源文件

    总之,通过研究这10个网站Banner的FLA源文件,无论是初学者还是经验丰富的设计师,都可以提升自己的Flash设计技能,理解如何创造具有吸引力的网页Banner,并将所学应用到实际项目中。这些源文件不仅是学习工具,也是...

    UBB论坛转帖圣手.exe

    UBB论坛转帖圣手.exeUBB论坛转帖圣手.exe

    [转帖]世界编程大赛第一名写的程序

    标题和描述中的“世界编程大赛第一名写的程序”这一知识点,...对于IT行业的专业人士和学生来说,研究这些程序不仅可以学到前沿的技术知识,更能激发创新思维,提升解决问题的能力,为未来的职业生涯奠定坚实的基础。

    discuz X2转帖工具、采集工具

    1. 社区营销:对于企业或个人来说,使用转帖工具可以帮助推广产品或服务,提升品牌知名度。 2. 信息聚合:对于新闻资讯类论坛,可以通过采集功能快速收集并分享最新信息,提升论坛的新闻价值。 3. 数据分析:通过...

    网页设计与制作-1期 深蓝色调的社区网站说明文档.pdf

    总结来说,深蓝色调的社区网站设计涉及到网页布局、功能模块实现、色彩搭配以及用户体验等多个方面。设计师需要结合技术知识和艺术审美,创建出既美观又实用的网络社区,满足用户的需求并促进社区的互动。这种实践性...

    一键转帖功能插件 for 帝国CMS 6.0 GBK utf8 V1.0.rar

    总结来说,“一键转帖功能插件 for 帝国CMS 6.0 GBK utf8 V1.0”是提高网站内容传播效率的有效工具,通过简单的安装步骤即可实现。在实际应用中,理解其工作原理和可能出现的问题,将有助于更好地利用这一插件,提升...

    编辑人员转帖去水印工具

    本篇文章将详细探讨“编辑人员转帖去水印工具”,并介绍如何使用名为Teorex Inpaint的1.0.0.2版本的软件来实现这一目标。 首先,我们要理解什么是水印。水印通常是指在图像或视频中添加的半透明标记,它可以是文字...

    转帖工具ConvertX fordiscuz7.1/7.2 修改增强版.rar

    2.新增批量替换关键词(原来是单个词语替换,可以利用这个功能删除一些网站的防转帖代码) 3.批量随机新增文字(新增内容可自定义,从而实现伪原创) 4.cookie记录替换和新增关键词(避免每次打开转帖工具都要输入繁琐的...

    一键转帖功能插件 for 帝国CMS v1.0.rar

    标签 "程序插件-ecms插件" 显示了这个压缩包是针对帝国CMS的程序插件,属于网站开发和运维领域,对于那些希望提升网站互动性和分享性的用户来说,这是一个非常实用的工具。 总结一下,"一键转帖功能插件 for 帝国...

    转帖工具插件 for PHPwind 7.5 正式版.rar

    总的来说,"转帖工具插件 for PHPwind 7.5 正式版" 提供了一个高效且用户友好的解决方案,帮助管理者优化论坛内容的组织和管理,同时降低了操作复杂度,提升了用户体验。正确理解和使用这款插件,能有效提升 PHPwind...

    Html2UBBMaxcj_Softii论坛专用转帖工具

    - **人人软件站.url**:这可能是一个快捷方式,指向一个网站,用户可以通过这个链接获取更多的软件信息或者下载其他资源。 - **Html2UBB**:这可能是实际的软件执行文件或库文件,用户需要运行或解压后才能使用...

    转帖图片提取工具 v1.0.zip

    转帖图片提取工具可以对论坛图片附件信息进行清除,只保留图片代码,操作很简单,推荐有需要转帖图片工具的朋友下载 转帖图片提取工具使用方法: 将IP138上处理过的东西复制到上方的编辑框内,点击只要图片,下面...

    maya.rar_asp导航_maya_玛雅_玛雅网站导航_玛雅视频导航

    ASP(Active Server Pages)是一种由微软开发的服务器端脚本环境,用于生成动态网页或Web应用程序。在"maya.rar_asp导航_maya_玛雅_玛雅网站导航_玛雅视频导航"这个压缩包中,我们关注的核心是ASP技术在构建玛雅自助...

    浮点栈结构(转帖) - 大呵呵 - 博客园_float_floatregister_

    理解和利用好这个结构,无论是对底层硬件设计者还是软件开发者来说,都是提升系统性能的重要途径。在实际应用中,需要结合编译器优化和适当的数据布局策略,充分利用浮点栈的优势,以实现更快、更精确的计算。

Global site tag (gtag.js) - Google Analytics