<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>小杜学习笔记 &#187; 压缩</title>
	<atom:link href="http://tinydoo.cn/tag/%e5%8e%8b%e7%bc%a9/feed" rel="self" type="application/rss+xml" />
	<link>http://tinydoo.cn</link>
	<description>记录生活学习点滴</description>
	<lastBuildDate>Thu, 10 Dec 2009 14:43:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>压缩你的PHP、JS、CSS等文本类型代码</title>
		<link>http://tinydoo.cn/2009/303.html</link>
		<comments>http://tinydoo.cn/2009/303.html#comments</comments>
		<pubDate>Wed, 20 May 2009 03:54:09 +0000</pubDate>
		<dc:creator>小杜</dc:creator>
				<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[apache]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[压缩]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://tinydoo.cn/?p=303</guid>
		<description><![CDATA[众所周知，减小代码在传输中的大小，就能提高页面的传输速度，打开网页也就快了，这是基于带宽瓶颈的理论，当然服务器速度受到其他很多因素的影响， 有PHP代码执行速度，数据库访问速度，磁盘读写IO速度等，无论怎样，带宽影响是非常大，而受中国电信抑或是中国网通还有其他的一些电信公司的制约，在 服务器网络带宽并不很充裕的条件下，压缩代码传输将会大大节省带宽！
本文讲述通过使用Gzip压缩方式自动压缩相应的代码，在访问者浏览器端会自动还原成代码以便浏览器执行，至于编写代码时的良好风格节省空间的方法不在本文之列。
GZIP 最早由Jean-loup Gailly和Mark Adler创建，用于UNIX系统的文件压缩。我们在 LINUX中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常 使用GZIP压缩技术来让用户感受更快的速度。
<span class="readmore"><a href="http://tinydoo.cn/2009/303.html" title="压缩你的PHP、JS、CSS等文本类型代码" target="_blank">阅读全文——共1692字</a></span>]]></description>
			<content:encoded><![CDATA[<p>众所周知，减小代码在传输中的大小，就能提高页面的传输速度，打开网页也就快了，这是基于带宽瓶颈的理论，当然服务器速度受到其他很多因素的影响， 有PHP代码执行速度，数据库访问速度，磁盘读写IO速度等，无论怎样，带宽影响是非常大，而受中国电信抑或是中国网通还有其他的一些电信公司的制约，在 服务器网络带宽并不很充裕的条件下，压缩代码传输将会大大节省带宽！</p>
<p>本文讲述通过使用Gzip压缩方式自动压缩相应的代码，在访问者浏览器端会自动还原成代码以便浏览器执行，至于编写代码时的良好风格节省空间的方法不在本文之列。</p>
<blockquote><p>GZIP 最早由Jean-loup Gailly和Mark Adler创建，用于UNIX系统的文件压缩。我们在 LINUX中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常 使用GZIP压缩技术来让用户感受更快的速度。</p></blockquote>
<p>首先测试一下你的网站各个页面是否采用了Gzip压缩，这里有个<a href="http://www.port80software.com/tools/compresscheck.asp?url=http%3A%2F%2Ftinydoo.cn" target="_blank"><span style="text-decoration: underline;"><span style="color: #3065ad;">测试工具</span></span></a></p>
<p>目前，有两种主流方法实现Gzip压缩。<br />
一、<a href="http://httpd.apache.org/docs/2.0/mod/mod_deflate.html" target="_blank"><span style="text-decoration: underline;"><span style="color: #3065ad;">mod_deflate模块</span></span></a></p>
<blockquote><p>mod_deflate 模块提供了DEFLATE输出过滤器，允许服务器在将输出内容发送到客户端以前进行压缩(应该也是采用gzip数据格式压缩，deflate是一种压缩算 法)以节约带宽。Apache 1.3.x时代使用mod_gzip模块来实现，Apache2已经内置了mod_deflate模块。</p></blockquote>
<p>这种方法要求安装了Apache的http服务器软件，并且加载了deflate模块。</p>
<p>使用方法：</p>
<p>在网页发布目录的.htaccess文件中加入：</p>
<div class="hl-surround">
<ol class="hl-main ln-show">
<li class="hl-firstline"><span style="color: olive;">&lt;</span><span style="color: green;">ifmodule</span><span style="color: #00008b;">mod_deflate</span><span style="color: gray;">.</span><span style="color: #00008b;">c</span><span style="color: olive;">&gt;</span></li>
<li><span style="color: gray;">AddOutputFilter DEFLATE html htm xml php js css</span></li>
<li><span style="color: olive;">&lt;/</span><span style="color: green;">ifmodule</span><span style="color: olive;">&gt;</span></li>
</ol>
</div>
<p>这样就会使得Apache在发布html,xml,php,js,css这样的文件时会采用Gzip方式传输数据，这个方法简单，一劳永逸，但一般使用的虚拟主机并没有安装deflate模块，也不一定是Apache的，不过我们还有办法：</p>
<p>二、<a href="http://cn2.php.net/manual/zh/function.ob-gzhandler.php" target="_blank"><span style="text-decoration: underline;"><span style="color: #3065ad;">ob_gzhandler函数</span></span></a><br />
主机要求：支持PHP，PHP版本在4.0.4以上，安装有<a href="http://www.zlib.net/" target="_blank"><span style="text-decoration: underline;"><span style="color: #3065ad;">zlib库</span></span></a></p>
<p>对于PHP文件传输中压缩，只需在原来的 PHP 文件首行加上</p>
<div class="hl-surround">
<ol class="hl-main ln-show">
<li class="hl-firstline"><span style="color: blue;">&lt;?php</span><span style="color: green;">if</span><span style="color: olive;">(</span><span style="color: blue;">extension_loaded</span><span style="color: olive;">(</span><span style="color: #8b0000;">&#8216;</span><span style="color: red;">zlib</span><span style="color: #8b0000;">&#8216;</span><span style="color: olive;">))</span><span style="color: olive;">{</span><span style="color: blue;">ob_start</span><span style="color: olive;">(</span><span style="color: #8b0000;">&#8216;</span><span style="color: red;">ob_gzhandler</span><span style="color: #8b0000;">&#8216;</span><span style="color: olive;">)</span><span style="color: gray;">;</span><span style="color: olive;">}</span><span style="color: blue;">?&gt;</span></li>
</ol>
</div>
<p>并且在结尾加上</p>
<div class="hl-surround">
<ol class="hl-main ln-show">
<li class="hl-firstline"><span style="color: blue;">&lt;?php</span><span style="color: green;">if</span><span style="color: olive;">(</span><span style="color: blue;">extension_loaded</span><span style="color: olive;">(</span><span style="color: #8b0000;">&#8216;</span><span style="color: red;">zlib</span><span style="color: #8b0000;">&#8216;</span><span style="color: olive;">))</span><span style="color: olive;">{</span><span style="color: blue;">ob_end_flush</span><span style="color: olive;">()</span><span style="color: gray;">;</span><span style="color: olive;">}</span><span style="color: blue;">?&gt;</span></li>
</ol>
</div>
<p>复制时还原为正规的PHP格式。</p>
<p>对于js文件，则在原来js文件的首行加上</p>
<div class="hl-surround">
<ol class="hl-main ln-show">
<li class="hl-firstline"><span style="color: blue;">&lt;?php</span><span style="color: green;">if</span><span style="color: olive;">(</span><span style="color: blue;">extension_loaded</span><span style="color: olive;">(</span><span style="color: #8b0000;">&#8216;</span><span style="color: red;">zlib</span><span style="color: #8b0000;">&#8216;</span><span style="color: olive;">)</span><span style="color: olive;">)</span><span style="color: olive;">{</span><span style="color: blue;">ob_start</span><span style="color: olive;">(</span><span style="color: #8b0000;">&#8216;</span><span style="color: red;">ob_gzhandler</span><span style="color: #8b0000;">&#8216;</span><span style="color: olive;">)</span><span style="color: gray;">;</span><span style="color: olive;">}</span><span style="color: blue;">header</span><span style="color: olive;">(</span><span style="color: #8b0000;">&#8220;</span><span style="color: red;">Content-Type: text/javascript</span><span style="color: #8b0000;">&#8220;</span><span style="color: olive;">)</span><span style="color: gray;">; </span><span style="color: blue;">?&gt;</span></li>
</ol>
</div>
<p>末尾同样加上</p>
<div class="hl-surround">
<ol class="hl-main ln-show">
<li class="hl-firstline"><span style="color: blue;">&lt;?php</span><span style="color: green;">if</span><span style="color: olive;">(</span><span style="color: blue;">extension_loaded</span><span style="color: olive;">(</span><span style="color: #8b0000;">&#8216;</span><span style="color: red;">zlib</span><span style="color: #8b0000;">&#8216;</span><span style="color: olive;">))</span><span style="color: olive;">{</span><span style="color: blue;">ob_end_flush</span><span style="color: olive;">()</span><span style="color: gray;">;</span><span style="color: olive;">}</span><span style="color: blue;">?&gt;</span></li>
</ol>
</div>
<p>然后存为abc.js.PHPfont&gt;这样的文件，并且修改指向这个所有html，PHPfont&gt;等文件。</p>
<p>改</p>
<div class="hl-surround">
<ol class="hl-main ln-show">
<li class="hl-firstline"><span style="color: olive;">&lt;</span><span style="color: green;">script</span><span style="color: #00008b;">type</span><span style="color: gray;">=</span><span style="color: #8b0000;">&#8220;</span><span style="color: red;">text/javascript</span><span style="color: #8b0000;">&#8220;</span><span style="color: #00008b;">src</span><span style="color: gray;">=</span><span style="color: #8b0000;">&#8220;</span><span style="color: red;">abc.js</span><span style="color: #8b0000;">&#8220;</span><span style="color: #00008b;">charset</span><span style="color: gray;">=</span><span style="color: #8b0000;">&#8220;</span><span style="color: red;">utf-8</span><span style="color: #8b0000;">&#8220;</span><span style="color: olive;">&gt;&lt;/</span><span style="color: green;">script</span><span style="color: olive;">&gt;</span></li>
</ol>
</div>
<p>为</p>
<div class="hl-surround">
<ol class="hl-main ln-show">
<li class="hl-firstline"><span style="color: olive;">&lt;</span><span style="color: green;">script</span><span style="color: #00008b;">type</span><span style="color: gray;">=</span><span style="color: #8b0000;">&#8220;</span><span style="color: red;">text/javascript</span><span style="color: #8b0000;">&#8220;</span><span style="color: #00008b;">src</span><span style="color: gray;">=</span><span style="color: #8b0000;">&#8220;</span><span style="color: red;">abc.js.php</span><span style="color: #8b0000;">&#8220;</span><span style="color: #00008b;">charset</span><span style="color: gray;">=</span><span style="color: #8b0000;">&#8220;</span><span style="color: red;">utf-8</span><span style="color: #8b0000;">&#8220;</span><span style="color: olive;">&gt;&lt;/</span><span style="color: green;">script</span><span style="color: olive;">&gt;</span></li>
</ol>
</div>
<p>对于a.html文件就直接改成a.PHPfont&gt;访问好了，如果要保留原来的URL就 修改.htaccess 伪URL或者建立一个网页跳转吧，而其他的CSS等文本也就依此推算出该怎么改了。</p>
<p>压缩效能说明：jQuery库源代码为50k左右，先写代码时优化，去除空格组合函数等使其减小至26k，再使用GZIP压缩至14k！<br />
再附一张其他网站的压缩效能比较图，图中三种方式都是GZIP，只是执行的方法不同而已。<br />
<a rel="lightbox[96]" href="http://21pt.com/Attach/month_0808/4x18y8_193233_1.png" target="_blank"><img src="http://21pt.com/Attach/month_0808/4x18y8_193233_1.png" alt="gzip.png" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://tinydoo.cn/2009/303.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
