性能黄金法则揭示终端用户响应时间80%用于前端，而前端响应时间中10%-20%的最终用户响应时间花在接收所有请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表、Flash等）的HTTP请求上。因此，改善响应时间的最简单途径就是减少组件的数量，进而减少HTTP请求的数量。
减少页面中组件数量的方法就是简化页面设计，但是这又与现实中需要实现丰富的内容相冲突，所以我们希望既可以构建出丰富的页面内容，又可以尽量实现响应时间。一般针对于减少HTTP请求数量，可以从以下几个方面进行优化：
- 内联图片（Inline Images）
使用data:URL模式可以在Web页面中包含的图片，这样可以避免额外的HTTP请求，但这个会增加HTML文档的大小。一些浏览器并不支持内嵌图像，所以可以将内嵌图像合并到缓存的样式表中这样可以避免增加页面大小。
由于data:URL是内联在页面中，在访问不同页面时将不会被缓存。内联图片时不要内联公司的LOGO，因为编码过的LOGO会导致页面变大，这种情况下最合适的做法就是使用CSS将内联图片做成背景，同时将CSS规则放在外部样式中，这样数据就可以缓存在样式表内部。
- CSS Sprites
CSS Sprites是一种网页图片应用处理的方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样当访问某个页面时，不需要将图片一张张的加载进来。
CSS Sprites原理是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
- 合并脚本和样式表（Combined Scripts and Stylesheets）
现在很多网站一般都使用了JavaScript和CSS，如果采用软件工程师推荐的模块化的原则将代码分开放到多个小文件中，这样会明显降低性能，因为每个文件都会导致一个额外的HTTP请求。通常，组合文件是一种通过将所有脚本合并为一个脚本来减少HTTP请求数量的方法，同样也可以将所有CSS合并到一个样式表中。但是，当脚本和样式表因页面而异时，将文件组合起来更具挑战性，但使发布过程的这一部分能够缩短响应时间。
当然并不建议将脚本和样式表合并在一直，但多个脚本应该合并为一个脚本，多个样式表也应该合并为一个样式表。理想情况下，一个页面应该使用不多于一个脚本和样式表。
- 图片映射（Image Maps）
图片映射是一个能对链接指示作出反应的图形或文本框。单击该图形或文本框的已定义区域，可转到与该区域相链接的目标 (URL)。将多个图片组合成单个图像，通过图片映射的方法可以减少HTTP请求数量。
图片映射有两种类型：一是服务器端图片映射；二是客户端图片映射。服务器端图片映射（Server-side image maps）是将所有点击提交到同一个目标URL，向其传递用户单击的X、Y坐标，Web应用程序将该X、Y坐标映射为适当的操作。客户端图片映射（Client-side image maps）更加典型，它可以将用户的点击映射到一个操作，而无需向后端应用程序发送请求。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
