规则1：减少HTTP请求
方法：
1.图片地图（Image Map）
在一个图片上关联多个url，目标url的选择取决于用户点击了图片上的哪个位置。
2.css sprites
也可以合并图片，但更为灵活。
<style type="text/css">
#navbar span {
width: 31px;
height: 31px;
display: inline;
float:left;
background-image: url(/img/sprite.gif);
}
.home {background-position: 0 0; margin-right: 4px; margin-left: 4px;}
.gifts {background-position: -32px 0; margin-right: 4px;}
.cart {background-position: -64px 0; margin-right: 4px;}
.settings {background-position: -96px 0; margin-right: 4px;}
.help {background-position: -128px 0; margin-right: 0;}
</style>
<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width:180px; height: 32px; padding: 4px 0 4px 0">
<a href="javascript:alert('Home')"><span class="home"></span></a>
<a href="javascript:alert('Gifts')"><span class="gifts"></span></a>
<a href="javascript:alert('Cart')"><span class="cart"></span></a>
<a href="javascript:alert('Settings')"><span class="settings"></span></a>
<a href="javascript:alert('Help')"><span class="help"></span></a>
</div>css sprites还可以通过合并图片减少http请求，还降低了下载量，虽然有人会认为合并后的图片比分离的图片总和要大，但实际上合并后的图片会比分离的图片总和要小，因为它除低了图片自身的开销（颜色表，格式信息等）。
3.内联图片
data:[<mediatype>][;base64],<data>通过data:URL模式可以在Web页面中包含图片但无需任何额外的http请求，同时可能存在数据大小上的限制。由于data:URL是内联在页面中的，在跨越不同页面时不会被缓存，所以不要去内联公司的logo。
4.合并脚本和样式表
规则2：使用内容发布网络（CDN， Content Delivery Network）
规则3：添加Expires头
【Expires： Thu,15 Apr 2010 20:00:00 GMT】1.作用
web服务器使用Expires头来告诉web客户端它可以使用一个组件的当前副本，直到指定的时间为止。HTTP规范中简要的称该头为“在这一日期之后，响应被认为是无效的”，它在HTTP响应中发送。
如果页面中的一个图片返回了这个头，浏览器在后续的页面中会使用缓存的图片，将HTTP请求的数量减少一个。
2.缺点
它要求服务器和客户的时钟严格同步，另外，过期日期需要经常检查，如果过期后，还需要在服务器配置中提供一个新的日期。
3.另一种选择
Cache-Control： 【Cache-Control:max-age=315360000】Cache-control使用max-age指令指定组件被缓存多久，它以秒为单位定义了一个更新窗。
4.更新的方法
Expires头会使用浏览器直接从硬盘上读取组件而无需生成新的http流量。因此，即使在服务器上更新了组件，已经访问过网站的用户也不大可能获取新的组件。为了确保用户能获取组件的最新版本，需要在所有html页面中修改组件的文件名：最有效的方案是修改所有链接，比如可以嵌入版本号。
规则4：压缩组件
web客户端可以通过http请求的Accept-Encoding头来表示对压缩的支持：
Accept-Encoding： gzip，deflate如果web服务器在请求信息中看到这个头信息，它就可以通过响应的Content-Encoding头信息来返回服务器可用的压缩方式。
Content-Encoding: gzip1.压缩什么
基于文本的资源如html,js ,css， xml都适用于压缩，然后对于图片而言，却不应该对图片进行压缩，因为图片本身已经被压缩过了，如果再进行gzip压缩，有可能得到的结果是和图片本身大小相差不大或更大，这样就浪费了服务器的CPU资源来做无用功了。
2.代理缓存的问题
浏览器直接与服务器通信，基于Accept-Encoding都可以很好的工作。但如果通过代理，这种情况下，压缩就要考虑额外的东西。
首先，假设到达代理的是一个来自不支持gzip的浏览器的请求，代理会将请求转发到web服务器，此时web服务器的响应是未经压缩的，这个响应会把代理服务器缓存起来并发给浏览器，现在，假设到达代理的第二个请求来自一个支持gzip浏览器，请求的是与之前相同的URL，代理会直接使用未经压缩的缓存响应，那么就失去了进行压缩的机会。考虑更糟糕的情况，第一个请求来自支持gzip的浏览器，第二个请求来自不支持gzip的浏览器，这样第二个请求得到的缓存响应将无法被解码，导致出错。
解决这一问题的方法就是在Web服务器的响应中添加Vary头
Vary:Accept-Encoding表示web服务器告诉缓存服务器分别为每一个Accept-Encoding请求头缓存。
规则5： 将样式表放在顶部
将样式表放在文档底部会导制在浏览器中阻止内容逐步呈现，为避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。
1. link标签：
<link rel="stylesheet" href="style.css">
2. @import规则：
<style>
@import url("style.css");
</style>规则6： 将脚本放在底部
使用并行下载：要考虑带宽和CPU速度，使用两个主机名更好。
脚本阻塞下载：然而，在下载脚本不可以使用并行下载，这是为了保证脚本能够按照正确的顺序执行。
规则7： 避免css表达式
表达式的求值频率太高了，它们不止在页面呈现和大小改变时求值，当页面滚动、甚至鼠标拖拽都要求值。
解决方法：
1.一次性表达式
2.事件处理器。
规则8：使用外部Javascript和CSS
纯粹而言，内联快一些，因为外部示例需要承担多个http请求带来的开销，但是，现实中还是外部文件较快，因为JS和CSS文件有机会被浏览器缓存起来。
规则9：减少DNS查找（通过Keep-Alive和较少的域名来减少DNS查找）
TTL(Time-to-live，存活时间)：查找返回的DNS记录中含有这个值，该值告诉客户端可以通过该记录缓存多久。
Keep-Alive:通过重用现有连接，从而避免TCP/IP开销来减少响应时间。
规则10：精简JavaScript
1.Minification
是从代码中移除不必要的字符以减少其大小，进而改善加载时间。在代码被精简后，所有的注释及不必要的空白字符（空格、换行和制表符）都将被移除。
2.Obfiscation
移除注释和空白，同时还会改定代码，代为改定的一部分，函数和变量的名字也将会被转换成更短的字符串，这时的代码更加精简，也更难阅读。通常这样做的目的是为了增加对代码进行返回工程的难度，但这对提高性能而言也有帮助。
规则11：避免重定向
300 Multiple Choices (基于Content-type)
301 Moved Permancently
302 Moved Temporarity(亦作Found)
303 See Other(对302的说明)
304 Not Modified 并非真的重定向，用来响应条件GET请求，避免下载已经存在于浏览器缓存中的数据
305 Use Proxy
306 (不再使用)
307 Temporary Redirect(对302的说明)规则12：删除重复脚本
规则13：配置ETag
实体标签（Entity Tag,ETag）是web服务器和浏览器用于确认缓存组件有效性的一种机制。