Web前端性能优化教程01：减少Http请求和使用内容分发网络
性能黄金法则
只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。
前言
有关前端性能优化的资料参考于《高性能网站建设》这本书，这一系列的文章可以看作是对这本书的阅读笔记。
改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。接下来将探讨几个技术实现。
1. 图片地图
图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
以导航栏为例，当点击图标的时候将打开一个新的窗口。要实现的效果如下图：
我们可以通过使用五个分开的图片，然后让每个图片对应一个超链接。然而这样无疑就产生了5个Http请求，我们的目标是要减少HTTP请求，这里图片地图就可以派上用场了，通过将五个图片合并为一张图片，然后以位置信息定位超链接，这样就把HTTP请求减少为一个了，又可以保证设计的完整性和功能的齐全性，实现代码如下：
- <img usemap="#map1" border=0 src="">
- <map name="map1">
- <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">
- <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">
- <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">
- <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">
- <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">
- </map>
2. CSS Sprites
CSS Sprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。 这里重点提一下backgroud-position属性。backgroud-position:x y; x和y可以写负值也可以写正值，我们可以想象图片的左上方为(0,0)，以(0,0)坐标向右是为负数的x轴，以(0,0)坐标向下是为负数的y轴。正值的情况则以图片左下方为(0,0)，向右是为正数的x轴，向上是为正数的y轴。
来看一张来自豆瓣的翻页图片：
可以明显地看到这里组合了4张图片，上面两个按钮是初始显示按钮样式，当鼠标移到上面的时候就变为下面两个按钮样式，实现代码如下：
- <html>
- <head>
- <title></title>
- <style type="text/css">
- .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; }
- .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; }
- .left:hover{ background-position:0px -18px; }
- .right:hover{ background-position:-18px -18px; }
- </style>
- </head>
- <body>
- <div>
- <div class="left"></div>
- <div class="right"></div>
- </div>
- </body>
- </html>
通常情况下，前端切图得到的是一张张小图标，要将其合并为一张图，可以使用专门的工具，例如CSS Sprite Generator，这个工具不仅可以合并图片，同时还可以生成图片的css样式。
与图片地图做一个对比：图片地图是依赖于html实现，CSS精灵依赖于CSS实现，CSS精灵的实现方式更为灵活。
3. 合并脚本和样式表
适当地把多个脚本合并为一个脚本，把多个样式表合并为一个样式表。
基础知识
服务器离用户越近，HTTP请求的响应时间将更短。 CNAME：别名记录，当多个域名需要指向同一服务器IP，可以使用一个域名做A记录指向该服务器IP，然后让多个域名指向该A记录。 ICP：Internet Content Providor。 DNS：Domain Name System。
什么是内容分发网络?
CDN（Content Deliver Network）是一组分布在多个不同地理位置的Web服务器，通过将网站的资源发布到最接近用户的网络”边缘“，供用户就近取得所需内容。CDN可以看作一种缓存代理，主要用于对静态资源（如图片，css，js等）的缓存。
CDN的网络架构
CDN的网络架构主要分为中心和边缘两个部分，中心服务器主要负责DNS解析和全局负载均衡；而边缘服务器指异地节点，作为CDN分发的载体，包括负载均衡和高速缓存。边缘服务器的负载均衡负责缓存内容的负载均衡，保证节点的工作效率，同时还负责与中心服务器通信，实现整个系统的负载均衡。边缘服务器的高速缓存负责存储从客户源服务器获取的资源，并提供给本地用户访问。
CDN的工作原理
除了一些大型互联网公司拥有自己的CDN，其他公司基本都会选择CDN运营商合作。
所以作为ICP，需要把域名解释权交给CDN运营商，操作时ICP修改自己的域名解析部分，一般用CNAME的方式，将自己的静态资源域名指向一个CDN提供的CNAME。
而作为CDN运营商，需要对CNAME提供专用DNS解析，同时需要维护客户服务器的域名和IP地址映射列表。
CDN工作流程如下：
1.浏览器获得需要访问的资源的域名; 2.通过域名解析得到该域名指向CDN的一个CNAME; 3.为了获得IP地址，需要对CNAME进行域名解析，这时请求就会被发送到CDN的中心服务器，全局负载均衡通过预先设定的规则，同时根据用户访问的地理位置信息，把最合适的边缘服务器IP地址返回； 4.浏览器获得IP地址后，就向边缘服务器发出请求； 5.边缘服务器根据访问域名，首先搜索缓存，查看资源是否存在，存在则直接返回资源给浏览器，直接完成整个资源请求过程，否则就根据缓存内部的DNS解析得到资源实际IP地址（即客户的服务器IP地址），向该IP地址发起资源请求； 6.边缘服务器向客户服务器请求资源成功后，就把该资源加入本身的高速缓存中，并把资源发送给用户。
CDN的简单应用
其实CDN的使用并没有和我们想象中那么遥远，JQuery应该是当今Web开发领域使用最为广泛的js框架之一，很多时候我们的网站都需要引用一个jquery.min.js的引用，我们可以将这个js文件存储在自己的服务器，或者更好的选择：使用大公司的CDN服务提供的jquery.min.js. 微软和google都提供了jquery的CDN免费服务，你只需做的事情就是在项目中引用它们，就能享受CDN带来的便利。