HPWS(1)

Rule 1: Make Fewer HTTP Requests
减少HTTP请求次数

A simple way to improve response time is to reduce the number of components, in turn, reduce the number of HTTP requests.

• Images Maps. 当有多个小图片组成时, 可以将小图片放在一张图片上, 然后使用map定义区域范围. 例子在http://stevesouders.com/hpws/imagemap-no.php和http://stevesouders.com/hpws/imagemap.php, 对于导航工具栏中未使用和使用image map的两个例子.
  如< img usemap="#map1" border=0 src="/someimg.gif" >
  < map name="map1" >
  < area shape="rect" coords="0,0,31,31" href="#" >
  ...
  有个缺点是手工计算坐标比较麻烦,容易出错. ----这个也可以对同一张大图片, 通过设置各个小组件背景图片的background-position来实现类似的功能. 具体可以看下这个页面上对于各部份图片的设置
  
• CSS Sprints. 这个就是刚刚所说的使用background-position来调图片, 例子在http://stevesouders.com/hpws/sprites.php
  <a title="Home" href="javascript:alert('Home')">
  <span class="home"/>
  </a> //这里看到个好玩的, 原来 href还可以是一个js
  总之就是, 如果你有很多小图片, 就可以把它们联合起来(combination), 这样可以使得更少的请求.
• Inline Images. 使用URL scheme(有http:, ftp:, file:, mailto:, smtp:, pop:, dns:, whois:, finger:, daytime:, news:, urn:等). 这里用的是data: . 基于"allow inclusion of small data items as 'immediate' data." 基本格式为: data:[<mediatype>][;base64],<data>
  那么一个inline image可以表示成:
  <a title="Home" href="javascript:alert('Home')">
  <img border="0" src="data:image/gif;base64,R0lGODlh...s="/>
  </a > 例子在http://stevesouders.com/hpws/inline-images.php 但缺点是IE不支持, 大小限制, 对于FF1.5内联图片大小上限为100k.
  base64编码直接增加了图片大小, 而导致整个下载页面增大.
  比这种更好的方法是使用Inline CSS Images, http://stevesouders.com/hpws/inline-css-images.php就是将图片作为背景放到css文件中, 如: .home { background-image: url(data:image/gif;base64, Rol...);} 完整的inline css在http://stevesouders.com/hpws/inline-css-images-css.php ----不过这个base64怎么得到呢? 直接把一图片用base64表示? 如果是的话, 那一副图片岂不会有很长的base64编码?
• Combined Scripts and Stylesheets. Multiple scripts should be combined into a single script and multiple stylesheets should be combined into a single stylesheet. 但往往是很多个文件. The solution is to follow the model of compiled languages and keep the JavaScript modular while putting in place a build process for generating a target file from a set of specified modules. 怎么去合并使之尽量小?

这章总结就是一句话, Make fewer HTTP request. 这也是整本书的核心.

还有一句说的比较好的话: A fast response time on that first page view can make the difference between a user who abandons your site and one who comes back again and again.