标签：
规则1——减少HTTP请求
性能黄金法则揭示了只有10%-20%的最终用户响应时间花在接收所请求的HTML文档上。剩下的80%0-90%时间花在了为HTML文档所引用的所有组件（图片、脚本、样式表、Flash等）进行的HTTP请求上。因此，改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。
在一个简单的转简中，超链接带有一些文本，并被关联到目标URL上。一种更为美观的选择是将超链接关联到图片上，例如在导航栏或按钮中。如果是以这种形式关联多个带有超链接的图片，使用图片地图这种方式既能减少HTTP请求，又无需改变页面外观感受。图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
图片地图有两种类型。服务器端图片地图将所有点击提交到同一个目标URL，向 其传递用户单击的x,y坐标。Web应用程序将该x,y坐标映射为适当的操作，而无需向后端应用程序发送请求。映射通过HTML的MPA标签实现。
使用图片地图也有缺点。在定义图片地图上的区域坐标时，如果采取手工的方式则很难完成且容易出错，而且除了矩形之外几乎无法定义其它形状。通过DHTML创建的图片地图则在Internet Explorer中无法工作。
如果你正在导航栏或者其它超链接中使用多个图片，将它们转换为图片地图是加速页面的最简单的方式。
CSS Sprites
和图片地图一样，CSS Sprites也可以合并图片，但更为灵活。这个概念就像是使用“显灵板”一样，占卜写板不停移动，停留在不同的字母上。要使用CSS Sprites，需要将多个图片合并带一个单独的图片中。
占卜写板是任何支持背静图片的HTML元素，如SPAN或DIV。使用CSS的background-position属性，可以将HTML元素放置到。背景元素中期望的位置上。
内联图片
通过使用data:URL模式可以在web页面中包含图片但无需任何额外的HTTP请求。尽管Internet Explorer目前还不支持这种方式，但它能给其它浏览器带来节省使得它值得关注。
我们都很熟悉包含http:模式的URL。其它类似的模式包括ftp:、filr:和mailto:。但除此之外还有很多模式。
合并脚本和样式表
前端工程师必须选择是对JavaScript和 CSS进行“内联”（也就是将其嵌在HTML文档中）还是将其放在外部的脚本样式表文件中。一般来说，使用外部脚本和样式表对性能更有利。然而，如果遵循软件工程师所推荐的方式和模块化的原则将代码分开放到多个小文件中，会降低性能，因为每个文件都会导致额外的HTTP请求。
标签：
原文地址：http://www.cnblogs.com/fdw-bk/p/4580765.html
