只有10%-20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上。

规则01：尽量减少HTTP请求
通过使用图片地图，CSS Sprites（有利有弊），内联图片（data：URL模式，IE不支持，不能被缓存），合并脚本和样式表。
所以，我们要减少HTTP请求是要平衡性能和设计的。
①  图片地图
初看“图片地图”四个字，对非专业的前端人员来说一头雾水，我的第一印象就是这样的，咱们以京东的移动站点为例，右侧用户和购物车的图标，正常实现我会选择如下方式：
<a href=”用户跳转页面URL”>
  <div class=”定义用户icon显示的样式表”></div>
</a>
<a href=”购物车跳转页面URL”>
  <div class=” 定义用户icon显示的样式表”></div>
</a>
这种方式无可厚非的，但是两张图片就有两个HTTP请求，这明显是增加了页面中的HTTP请求。那么我们可以把这两个HTTP请求变成一个吗？
答案当然是可以的，这就是图片地图：允许在一张图片上关联多个URL，而目标URL的选择取决于用户单击了图片上的哪个位置。
这样上面京东两个图标合并成一张图片，这样图片的HTTP请求就减少了一个。
示例代码如下：
<img src=合并后的图片>
<map name=”map1”>
  <areashape=”rect” coords=”0,0,40,40” href=”用户跳转页面URL”>
  <areashape=”rect” coords=”50,0,90,40” href=”购物车跳转页面URL”>
</map>

不过图片地图只支持矩形形状，其他形状不支持。
②  请CSS喝“雪碧”（CSS Sprites）CSS Sprites一句话：将多个图片合并到一张单独的图片，这样就大大减少了页面中图片的HTTP请求。

③  内联图片和脚本使用data:URL（Base64编码）模式直接将图片包含在Web页面中而无需进行HTTP请求。但是此种方法存在明显缺陷：- 不受IE的欢迎；- 图片太大不宜采用这种方式，因为Base64编码之后会增加图片大小，这样页面整体的下载量会变大；- 内联图片在页面跳转的时候不会被缓存。（大图片可以使用浏览器的本地缓存，在首次访问的时候保存到浏览器缓存中，典型的是HTML5的manifest缓存机制以及LocalStorage等）。

④  样式表的合并将页面样式定义、脚本、页面本身代码严格区分开，但是样式表、脚本也不是分割越细越好，因为每多引用一个样式表就增加一次HTPP请求，能合并的样式表尽量合并。一个网站有一个公用样式表定义，每个页面只要有一个样式表就OK啦。

所以减少页面HTTP请求数量，是一个很重要的原则。

规则02：使用内容发布网络（CDN的使用）
什么叫内容发布网络（CDN）？它是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。主要用于发布页面静态资源：图片、css文件、js文件等。如此，能轻易地提高响应速度。
如果应用程序web服务器离用户更近，则一个HTTP请求的响应时间将缩短 ；
如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。
内容发布网络（CDN）是一组分布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容

规则03：添加Expires头
浏览器使用缓存来减少HTTP请求的数据，并减小HTTP响应的大小，使页面加载更快。Web服务器使用Expires头来告诉浏览器它可以使用一个组件的当前副本，直到指定的deadline为止。HTTP规范中称此头为：在这一时间之后响应被认为失效。
        web服务器使用Expires头告诉web客户端他可以使用一个组件的当前副本，直到指定的时间为止。要求服务器与客户端的时钟严格同步，并且要在时间过期后在服务器配置中提供一个新的日期。
Max-Age和mod_expires可以弥补Expires的不足。

个人对这块表示不想使用，其实就是一句话，把一些css、js、图片在首次访问的时候全部缓存到浏览器本地，从我做移动网站的过程中发现，其实没有这么复杂，完全可以使用HTML5提供的本地缓存机制就OK了。

规则04：压缩组件（使用Gzip方式）
书中关于压缩从gzip压缩方式到如何压缩讲了很多，我想直接跳过，对于做PC网站或者移动网站来说，急需要压缩的是css文件和js文件，至于如何压缩，网上有很多在线工具，去挑选一个自己用的顺手看的顺眼的就好，当然也有人选择对HTML进行压缩，这样也可以。

规则05：将CSS样式表放在顶部
如果将css样式定义放在页面中或者页面底部，会出现短暂白屏或者某一区域短暂白板的情况，这和浏览器的运营机制有关的，不管页面如何加载，页面都是逐步呈现的。所以在每做一个页面的时候，用Link标签把每一个样式表定义放在head中。
逐步呈现，避免白屏

规则06：将javascript脚本放在底部
浏览器在加载css文件时，页面逐步呈现会被阻止，直到所有css文件加载完毕，所以要把css文件的引用放到head中去，这样在加载css文件时不会组织页面的呈现。但是对于js文件，在使用的时候，它下面所有也页面内容的呈现都会被阻塞，将脚本放在页面越靠下的地方，就意味着越多的内容能够逐步呈现。
HTTP1.1规范建议浏览器从每个主机名并行下载两个组件，在下载脚本时，并行下载实际上是被禁用的。

原因之一是脚本有可能使用document.write来修改页面内容，因此浏览器会等待，以确保页面能够恰当地布局；
原因之二是为了保证脚本能够按照正确的顺序执行，如果并行下载多个脚本，就无法保证响应是按照特定顺序到达浏览器。
将脚本放在顶部将会阻塞对其后面内容的呈现，并且会阻塞对其后面组件的下载。

规则07：避免使用CSS表达式
CSS表达式是动态玩CSS的一种很强大的方式，但是强大的同时也存在很高的危险性。因为css表达式的频繁求值会导致css表达式性能低下。如果真想玩css表达式，可以选用只求值一次的表达式或者使用事件处理来改变css的值。
表达式expression方法被其他浏览器忽略，但是对于IE来说是一个有用的工具。能够在IE中设置属性，创建跨浏览器的一致体验。例如，IE[IE6，IE7（Quirk），IE8（Quirk]不支持min-width属性，用表达式的方法可以解决这一问题：
代码如下:

width: expression(document.body.clientwidth&lt;600?"600px": "auto");
min-width: 600px;
表达式的问题在于对其进行的求值的频率比人们期望的要高。他们不仅在页面呈现和大小改变时求值，当页面滚动甚至用户鼠标在页面上移过时都要求值。我们可以向CSS表达式中添加一个计数器来进行跟踪。
表达式计数器的实例：

http://stevesouders.com/hpws/expression-counter.php
代码如下:

P {
width: expression(setCntr(),document.body.clientwidth<600?"600px": "auto");
min-width: 600px;
}
取代表达式的方法：事件处理器（Event Handlers）
通过在onresize事件中设置样式的width属性来修正min-width问题。
事件处理器的实例：
http://stevesouders.com/hpws/event-handler.php
当浏览器的大小改变时，这个例子使用setMinWidth()函数来修改所有段落元素的大小——
代码如下:

function setMinWidth(){
setCntr(); //用于显示求值次数
var aElements = document.getElementsByTagName("p");
for(var i=0;i&lt;aElements.length;i++){
aElements.runtimeStyle.width=(document.body.clientwidth<600?"600px": "auto");
}
}
if(1!=navigator.userAgent.indexOf("MSIE")){
window.onresize=setMinWidth;
}
这会在浏览器改变大小时中动态设置宽度，但是第一次呈现时这并不能恰当地设置段落大小，因此，页面还需要使用“一次性表达式”，通过表达式设置初始宽度。

规则08：使用外部javascript和CSS
内联js和css其实比外部文件有更快的响应速度，那为什么还要用外部呢？因为使用外部的js和css可以让浏览器缓存他们，这样不仅HTML文档大小减少，而且不会增加HTTP请求数量。另外，使用外部js和css可以提高组件的可复用性。

规则09：减少DNS查询
DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS：缓存DNS查询可以很好地提高网页性能，一旦缓存了DNS查询，之后对于相同主机名的请求就无需进行再次的DNS查找，至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时，不要使用过多不同的主机名。

规则10：精简javascript

如何精简？ 
最初始的精简方式：就是移除不必要的字符减小js文件大小，改善加载时间。包括所有的注释、不必要的空白字符。

高级一点的精简方式就是：混淆。
它不但会移除不必要的字符，还会改写代码，比如函数和变量的名字会被改成很短的字符串，这样使js代码更简练更难阅读。

规则11：避免重定向
重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。
最常见的Redirect就是301和302两种。
范围在3xx的状态码，这表示用户代理必须执行进一步操作才能完成请求。
重定向影响的是HTML文档的下载
在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。

规则12：删除重复脚本
重复的js代码除了有不必要的HTTP请求之外，还会浪费执行js的时间。
将你使用的js代码模块化，可以很好地避免这个问题，至于js模块化如何实现，现在有很多可以使用的开源框架，我用的比较多的是我们公司玉伯的Sea.js。

规则13：配置ETag
Etag（Entity Tag），实体标签，是Web服务器和浏览器用户确认缓存组件的有效性的一种机制。写的很复杂，对我这种非专业的前端开发人员来说，有点过了，关于这个原则有兴趣的自己看吧。

规则14：使Ajax可缓存
针对页面中主动的Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断，每次请求会判断当前MD5是否变化，如果变化了取最新的数据，如果不变化，则不变。

时间总结下来，就是：尽量减少页面大小，尽量降低页面响应时间。在页面性能和交互设计之中找平衡点。