高性能网站建设指南

规则1：减少HTTP请求

方法：

1.图片地图（Image Map）

在一个图片上关联多个url，目标url的选择取决于用户点击了图片上的哪个位置。

2.css sprites

也可以合并图片，但更为灵活。

css sprites还可以通过合并图片减少http请求，还降低了下载量，虽然有人会认为合并后的图片比分离的图片总和要大，但实际上合并后的图片会比分离的图片总和要小，因为它除低了图片自身的开销（颜色表，格式信息等）。

3.内联图片

data:[][;base64],

通过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: gzip

1.压缩什么

基于文本的资源如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标签：
　　　　　　
2. @import规则：
　　　　　　

规则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服务器和浏览器用于确认缓存组件有效性的一种机制。

规则14：使Ajax可缓存

 

最后欢迎大家访问我的个人网站：1024s​​​​​​​