Web高性能开发之前端高性能（一）

/*
 * 引言：
 * 前端的高性能部分：主要是指减少HTTP请求数、减少数据传输、页面重构、样式渲染、提高用户体验等多方面，在这个部分，图片的优化显得至关重要。熟知大多网站的美化，都是靠绚丽的图片达到的，图片恰恰是占用带宽的元凶。每个 img 标签，浏览器都会试图发起一个HTTP请求。本系列第一部分将详细介绍图片优化的几种方式，介绍相关工具的使用以及优化后的结果。
 * 1.图片压缩：
 * 减少图片的大小可以明显提高页面性能，而对于现有图片，如果想减少其大小无非改变图片的格式，建议使用png-8的格式，它可以在保持图片清晰的情况下，减少图片大小，但是我们熟知的是IE6下背景图片透明会有bug，但是可以通过使用JS或者IE6 hack 使用gif背景图片代替。处理图片的工具windows画图工具，Photoshop，美图秀秀，等其他工具，现在给大家推荐一种Yahoo提供的在线转换工具Smush.it,可以批量压缩和转换图片。如下图所示：
 */

/*
 * 由此图看来压缩比例还是很可观。
 * 
 * 2.图片拼合技术：
 * CSS Sprites技术是一种很吸引人的技术，充分利用了CSS样式的background属性来获取不同位置的图片，利用此技术1)可以有效的减少HTTP请求次数，从而可以提高页面性能，一张图片的字节大小往往总是小于这些图片的字节总和，你们同意吧;2)可以提高图片的维护效率；3）充分利用图片缓存，提高加载效率；现在这种技术在各大型门户网站中很常见。
 * 诚然CSS Sprites强大的优点背后 ，也存在一些不容忽视的缺点：
 * 1)对于宽屏和高分辨率下的显示屏来说，会导致背景的断裂或者某些不必须要的背景。
 * 2)维护的时候必须细心，不能影响其他图片的坐标。
 * 但是性能压倒一切，必要时可以增大图标之间的间距，你懂的。
 * 
 * 3.多域名请求：
 * 看看新浪、淘宝、腾讯这些门户网站，他们的图片都是采用的是多域名请求的，为什么采用此种技术呢？
 * 1)将服务器的请求压力分到多个硬件服务器上；
 * 2)充分利用浏览器的特性，浏览器对于相同域名的图片，最多用2-4个线程并行下载，不同浏览器的并发下载数是不同的，具体看如下实例：
 */

测试代码一(一对多)：
<!--第一组：10个-->
<img src="http://www.cuew.com/uploads/130515/6-1305150JG1610.jpg" />
<img src="http://www.cuew.com/uploads/allimg/130516/105010FA-0-lp.jpg" />
<img src="http://www.cuew.com/uploads/130418/6-13041Q00R63B.jpg" />
<img src="http://www.cuew.com/uploads/130312/1-13031215014CJ.jpg" />
<img src="http://www.cuew.com/uploads/130313/1-130313142Ga22-lp.jpg" />
<img src="http://www.cuew.com/uploads/130313/1-13031314310I54-lp.jpg" />
<img src="http://www.cuew.com/uploads/allimg/130517/0946053558-0-lp.jpg" />
<img src="http://www.cuew.com/uploads/130517/6-13051F91FC49.jpg" />
<img src="http://www.cuew.com/uploads/130514/6-1305140I152960.jpg" />
<img src="http://www.cuew.com/uploads/allimg/130515/5-1305151005300-L.jpg" />
测试结果：

当刷新时：

发现有399.4kb来自浏览器缓存。

测试代码二(多对多)：
<!--10个-->
<img src="http://www.cuew.com/uploads/130515/6-1305150JG1610.jpg" />
<img src="http://www.cuew.com/uploads/allimg/130516/105010FA-0-lp.jpg" />
<img src="http://www.cuew.com/uploads/130418/6-13041Q00R63B.jpg" />
<img src="http://www.cuew.com/uploads/130312/1-13031215014CJ.jpg" />
<img src="http://img00.zhaopin.cn/img_button/201303/26/sg-dan-bj0326.jpg" />
<img src="http://img00.zhaopin.cn/img_button/201305/15/weibo322-53.jpg" />
<img src="http://img00.zhaopin.cn/img_button/201304/28/djbhe322-53.jpg" />
<img src="http://img02.zhaopin.cn/img_button/201305/15/12058785ad130515.gif" />
<img src="http://img02.zhaopin.cn/img_button/201305/02/hcbm-8-bj0502.gif" />
<img src="http://img02.zhaopin.cn/img_button/201305/09/yangss-sz.gif" />
测试结果：

不同域名间并行加载，刷新后如下图：

多域名的下载固然很好，但是太多域名并不太好，一般在 2-3 个域名下载就差不多。下面看看不同浏览器的并发下载数：

 Browsers                  HTTP/1.1   HTTP/1.0 
 IE6,7                      2           4 
 IE8                        6           6 
 FireFox 2                  2           8 
 FireFox 3                  6           6 
 Safari 3,4                 4           4 
 Chrome 1,2                 6           ? 
 Chrome 3                   4           4 
 Opera 9.63,10.00alpha      4           4 
 

/*
 * 4.GZIP压缩：
 * 为了减少传输的数据，压缩是一个不错的选择，而 HTTP 协议支持 GZIP 的压缩格式，服务器响应的报头包含 Content-Encoding: gzip，它告诉浏览器，这个响应的返回数据，已经压缩成 GZIP 格式，浏览器获得数据后要进行解压缩操作。这在一定程度可以减少服务器传输的数据，提高系统性能。Apache中如何配置呢？打开httpd.conf:进行如下配置：
 *  启用这两个模块，没有则添加：
 *  LoadModule headers_module modules/mod_headers.so
 *  LoadModule deflate_module modules/mod_deflate.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

	# 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命令不对？注释这一行
	# Header append Vary User-Agent env=!dont-vary
	</Location>
 *  重启Apache
 */

请求头信息
Accept	text/html, */*; q=0.01
Accept-Encoding	gzip, deflate
Accept-Language	zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Cookie	thinkphp_show_page_trace=0|0; PHPSESSID=da39ms5106ltroengs84412ll7
Host	localhost
Referer	http://localhost/UIBMSPHPProj/
User-Agent	Mozilla/5.0 (Windows NT 5.1; rv:20.0) Gecko/20100101 Firefox/20.0
X-Requested-With	XMLHttpRequest

响应头信息
Cache-Control	private
Connection	Keep-Alive
Content-Encoding	gzip
Content-Length	55
Content-Type	text/html; charset=utf-8
Date	Sat, 18 May 2013 07:33:15 GMT
Expires	Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive	timeout=5, max=97
Pragma	no-cache
Server	Apache/2.2.21 (Win32) PHP/5.3.10
Vary	Accept-Encoding
X-Powered-By	ThinkPHP

在高并发的情况，多个 Apache服务器之前，需要采用反向代理的技术，提高并发度，而目前比较火的反向代理是 Nginx,由于 Nginx 具有更高的性能，利用该配置可以更好的提高性能。在高性能服务器上该配置将非常有用。