第一章：减少HTTP请求—《高性能网站建设指南》读书笔记

一、图片处理：

1. 图片映射(Image Maps):

对于作为内容插入的图片适用。分为两种：客户端图片映射和服务端图片映射(maps翻译为映射似乎比地图更好些)，两者的共同点就是将所有图片作为一整张插入。

客户端图片映射即采用

而服务端图片映射是取鼠标点击图片的坐标，传到服务端判断该响应哪个操作。这种实现方式需要结合Javascript实现，还需要服务端程序配合，维护比较困难，一般很少使用。

2. CSS Sprites:

这是很实用的一种方式，经常被采用为非主体内容的图片以背景形式插入。简单理解就是图片合并技术，然后对合并的图片进行精准定位。

需要注意的是：如何合理的安排图片合并的位置和组合方式。组合方式有多种，可以根据页面使用频繁度来定，可以根据颜色来定，可以根据图片功能来定等。一般的，非重复的图片和重复的图片不要放在一起。图片间需要保持合适的距离，甚至有些情况下可以给每个图片写注释(发布前删掉这个文字图层，保留一个开发版本)。

CSS Sprites的另一个明显优势在于图片总体大小的减小。两个大小为10KB的同格式图片合并后，其大小会小于20KB。因为其降低了图片自身的开销，如颜色表、格式信息等。一般jpg格式的图片不要和gif和png放在一起(如果体积和质量变化不大还是可以放到一起的)，体积减小最明显的还是png格式。

3. 内联图片(Inline Images)：

内联图片即将图片以base64_encode代码形式嵌入到HTML或CSS代码中。在http://tools.ietf.org/html/rfc2397中描述为：允许将小块数据内联为立即(immediate)数。格式为：

data:[<mediatype>][;base64],<data>

看在页面的加载过程中，HTML文档的加载一般占5%左右，其余时间用来加载其他页面组件。采用内联图片的方式，适合于小图片，且只是将图片的加载时间放到HTML(或CSS)文档中了，整体加载量不会有太多减少，只是减少了连接数。而且内联到HTML文档的图片是无法缓存的，内联到CSS文档的图片还可以缓存。在某些浏览器中存在数据大小的限制。

空图片的插入，

background-image: url(data:image/gif;base64,AAAA)

二、合并脚本和样式表(Combined Scripts and Stylesheets)

这是针对外链的js或css文件。将零散的外部js或css文件合并为同一个，但是需要考虑的是这些文件的使用频繁度：如果都是在某些页面共同出现的话，合并到一起是可行的；但是如果某些js是出现在首页，而某些js是在用户登录后的管理界面才加载的，那么不适合合并到一起。

可以采取这样的合并方式：根据模块来合并js，将某模块下所有的js或css文件合并到一个文件，一般同模块下的功能很有可能使用到；根据使用频繁度来合并，经常使用的js或css文件合并到一个，非常用的合并为另一个文件；需要登录的系统，将不需要登录即可操作的js或css文件合并到一起，登录后的页面中加载的js和css合并到一起。至于采用哪种方式合并，需要取决于实际情况，或根据跟踪统计系统进行一些分析。

有一种更为节省的方式是将css和js文件合并，进一步减少了连接数，但是作者不建议合并，会使得职能混乱。

脚本和样式表的合并，会使得文件代码量增加，并且混淆作用域，因此模块化的编程方式、合理的命名体系和避免变量污染十分重要。

理想情况下，一个页面应该使用不多于一个的脚本和样式表。

合并后的文件需要压缩，以去掉空格\Tab\换行\注释\可删去的分隔符和可见写的代码。因此，代码的规范很重要。

==========update 2010-03-12==========

以上是针对页面加载时的优化，在页面交互中，客户端需要控制不必要的连接，在需要和服务器进行交互的时候才发出连接。最常见的就是验证类了，js筛选条件，在满足条件后再进行服务端验证，如验证邮箱是否注册，一个邮箱最短也有6位，那么至少格式不符合Email格式的长度小于6的输入是不应该进行连接验证了。