发布时间 : 星期二 文章电子商务系统前端性能优化的研究与实现 陈韵晴 - 图文更新完毕开始阅读
图3-3
下面再看使用图片地图这种情况。图片地图技术通过在同一个图片的不同区域设置各自的URL来实现，无需改变页面外观感受。用户单击某一区域即可实现该区域对应URL的跳转。图片地图通过
图3-4
图3-5
为导航栏运用了图片地图后，从图3-5中我们看到，HTML之后只发送了一个对图片的HTTP请求。本页面加载过程中总共发送2个HTTP请求，共传输37.9KB数据量，加载总共花费了0.203秒。导航栏使用图片地图的时间比未使用图片地图的时间快了31.88%（0.203：0.298），这里使用图片地图将7个HTTP请求缩减为仅有1个HTTP请求，大大加快了页面的响应速度。
实际上，很容易看出来我的浏览器设置的并行连接数为6，也就是说能够并行处理6个HTTP请求，这是比较好的情况。有些比较低版本的浏览器设置的并行连接数只有2或者4，这时候响应时间将会更长，图片地图的优势也更明显。
但是并不是什么场合都适合使用图片地图的。要使用图片地图，需要我们为所有区域先测量出坐标，得出坐标数据才能进一步写到代码里面来控制区域，这样十分地繁杂而且准确性也不高，而且只能使用矩形这种形状，灵活性也较低。一般情况下，网站的外观要求不高，就可以考虑通过图片地图这个优化方案来对导航栏或其他类似的图片组进行优化。
3.1.3 CSS Sprites
CSS Sprites9通过使用合并图片来减少HTTP请求数。通常情况下，对设计好的网页进行切图之后得到许多张小图片，为了不让浏览器在载入图片的时候零散地慢慢地显示，可以使用专门的工具将其合并为一张图，例如CSS Sprite Generato等，在合并图片的同时还可以快速生成相关的CSS样式，十分地方便。它与图片地图不同，后者依赖于html来实现，而CSS Sprite则依赖于CSS来实现，相较之下更为灵活。
3.1.4 脚本和样式表的合并
JavaScript脚本和CSS层叠样式表是一个优秀的网站必不可少的。在进行页面设计的时候，为了降低代码重复率，使文件结构更加清晰，易于修改和后期的维护，通常我们会写独立的.js文件和.css文件，然后再在HTML中引用它们。这种开发方式就容易出现页面需要引用多个外部JS文件的情况，当这些页面被加载时，使用了多少个独立的JS就得产生多少个HTTP请求，这样响应时间就长了。所以，在不影响功能实现的前提下，CSS样式表和JS文件都最好各自尽可能地合并减少文件数。
3.2 利用客户端缓存进行优化
3.2.1 原理
如今的网页为了更好的效果和更强大的功能，往往包含了大量的组件，这时候使用客户端的缓存就能够缩短浏览者等待页面加载的时间。虽然每个组件在首次访问的时候都需要向服务器发送HTTP请求进行下载，并不会减少响应时间，但是缓存技术可以在用户再次访问该网站时减少等待时间，如果这时还是像第一次访问的时候那样对所有需要的资源重新下载，就显得重复而且浪费。对于那些被经常需要请求的资源，最好在初次访问的时候就将需要下载的资源缓存到本地，增大缓存命中率，再次访问时让浏览器不必再向服务器提出请求，而是直接从本地硬盘读取这些资源，这样就极大地缩短了用户的等待时间，提升了用户体验。
3.2.2 添加Expires 标头
首次访问一个页面时，所有需要下载的组件都需要发送一个HTTP请求，对于那些经常用到的组件，我们可以通过在服务器添加一个Expires头使它们被浏览器缓存下来10，以方便在再次访问页面时浏览器能够从本地获取资源，避免了重复的HTTP请求和资源下载。服务器通过头信息中的Expires一项指定的时间让浏览器知道，被请求的资源在这个时间之前是可用的，而不必再一次重复下载。比如在HTTP响应中这样写：Expires: Sun, 17 Apr 2016 01:42:54 GMT，就是告诉
了浏览器该响应资源的有效时间，在这个时间之前请求该资源都可以在缓存中获取。
长久的Expires头常用于不常更新的图片（比如一个公司的logo图片），特别是那些大图片传输花费的时间比较多，当然也可以用在不经常变化的脚本、样式表和Flash等组件上，但一般不用于包含了动态内容的HTML文件，对HTML文件的每次访问都应该重新请求。假如请求资源中的某个图片的响应头信息包含了Expires一项，那么浏览器在再一次的页面加载过程中，就会使用本地缓存中的这个图片，而不是发送一个重复的HTTP的请求。组件使用Expires头的越多，响应时间就会越短。
然而，一个组件的Expires头也会有超过有效期限的时候，这时候浏览器会查看本地缓存中的该组件，如果识别到该组件已过期，则向服务器重新获取资源。根据前面说过的，如果对比时间之后发现组件仍然有效，服务器就不用传输完整的组件资源，而只需通过返回一个304状态码，让浏览器直接到本地缓存中读取这个资源即可。虽然产生了GET请求，但是比起简单的发送一个HTTP请求而言，还是免去了传输已缓存组件所需的资源和时间。因此，网站开发中注意运用Expires头信息以防止过多重复的HTTP请求，能够极大缩短HTTP响应时间。
3.2.3 使用Etag
同样用作确认本地缓存中的组件是否与服务器上的组件相符，Etag也是服务器通过放在响应头信息中的一项内容来实现的。Etag是一串用双引号括起来的字符串构成的，用来唯一地标识和指定所属组件的某一个版本。当然Etag也存在一些问题。因为用来构造Etag的值可能只对于某一个服务器来说是唯一的，当放到别的服务器上则可能行不通，比如采用了集群服务器的公司，会遇到这样的问题，当客户端从其中一台服务器获取了某一组件，这个组件的响应带一个Etag头，因此之后浏览器再次需要这个组件时就要发出一个条件GET请求，如果这时候请求发给了另外一台服务器，Etag的值就会因为没有匹配的组件而导致失灵。