《高性能网站建设指南》读书笔记

<b>规则</b><b>1</b><b>－减少</b><b>HTTP</b><b>请求</b><b></b>

<b></b>

请求网页时只有10％－20％的最终用户响应时间花在接收请求的HTMl文档上，剩下的80％－90％时间花在为HTML文档所引用的所有组建（图片，脚本，样式表，Flash等）进行的HTTP请求上，因此改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求数量。

图片地图：我们可以将多个图片完成的功能，使用一个图片，根据的不同区域来响应不应的请求。

合并脚本和样式表：每个文件都会导致一个HTP请求，尽量将css和js合并到一个文件中。 

<b>规则</b><b>2</b><b>－使用内容发布网络</b><b></b>

在多个地理位置不同的服务器上部署内容，如果web服务器离拥护更近，则一个http请求的响应时间将缩短，如果组件web服务器离拥护更近，则多个http请求的响应时间将缩短。有很多公司提供CDN（内容发布网络）服务。CDN用于发布静态内容，如图片，脚本，样式表和Flash。 

<b>规则</b><b>3</b><b>－添加</b><b>Expires</b><b>头</b><b></b>

使用Expires来设置浏览器缓存，指到指定的时间为止一直访问缓存中的内容。另外在http1.1中引入了cache－control头来克服Expires头的限制，因为Expires头使用一个特定时间，它要求服务器和客户端的时钟严格同步，过期时间需要经常检查，并且一旦未来这一天到来了，还需要在服务器配置中提供一个新的日期。

Cache－control使用max－age指定指定组件被缓存多久，它以秒为单位定义了一个更新窗。如果从组件被请求开始过去的秒数少于max－age，浏览器就使用缓存版本。

如果你同时指定了Expires和cache－control头，max－age指令将重写Expires头。

使用浏览器缓存减少了响应时间，但是当我们的组件更新的时候，已经访问过用户不太可能获取最新的组件，因为前一个版本已经在缓存中了，解决这个问题的方案就是修改文件名，比如我们组件使用变量. 

<b>规则</b><b>4</b><b>－压缩组件</b><b></b>

压缩已经在Email应用和FTP站点中使用了10年，http1.1开始，web客户端可以使用htpp头Accept－Encoding（Accept－Encoding：gzip;deflate）来标识压缩。deflate 也是一种压缩方式但不流行，Gizp是最理想的压缩方法。我们一般压缩的对象是html，样式表，脚本，图片和pdf不应该压缩，因为它们本来已经备压缩了，在去压缩只会白白的浪费cpu资源。压缩通常能将响应的数量减少将近70％。

正常情况下，当浏览器直接与服务器通信时我只要按常规的配置即可。但是当浏览器通过代理来发送请求的时候就变得非常复杂。需要考虑压缩和缓存之间的平衡。 

<b>规则</b><b>5</b><b>－将样式表放在顶部</b><b></b>

在早先的IE中比如将样式表放在底部，会导致白屏或者是无样式内容的闪烁。白屏是由于浏览器要等待css下载完再显示页面的组件，所以在等待css下载的时候页面就是白屏。无样式的闪烁是由于先下载页面的组件比如文字图片，并逐步显示，等css下载完则需要应用新的css样式渲染，就产生了这种无样式的闪烁现象。

正确使用方式是使用link标签将样式表放在文档的head中。

<b>规则6-将脚本放在底部</b>

并行下载：页面中的每个组件都会产生一个http请求，http请求会影响相应时间，浏览器对其下载的规则要依照http规范。在http1.1规范里建议浏览器从每个主机名并行下载两个组件，也就是说如果我们的组件在两个主机名下就会并行下载4个组件。但并非是主机名越多越好，Yahoo的研究表明使用两个主机名是最佳的。而且不同的浏览器会有不同的默认设置。

下载脚本时是禁止并行下载的，因为脚本可能使用document.write来修改内容，或者有多个脚本时他们之间可能存在依赖关系。所以脚本放在最下面就会先下载脚本而阻止页面其他组件的下载。所以最佳的情况就是将脚本放在底部。

<b>规则</b><b>7-</b><b>避免</b><b>css</b><b>表达式</b>

CSS表达式是动态设置CSS属性的一种强大但很危险的方式，它收到IE5之后版本的支持。类似background-color:expression();格式的。任何css表达式实现的功能我们都可以找到它的替代方式，我们尽量避免使用Css表达式。

<b>规则</b><b>8-</b><b>使用外部</b><b>JavaScript</b><b>和</b><b>CSS</b>

使用内联比外部文件确实有更快的响应速度，但是使用外部文件被浏览器缓存，哪种方式好还要考虑页面的浏览次数，缓存设置等。也有两全其美的方法，比如加载后下载，我们首先使用内联的方式，在主页加载完毕后动态下载外部组件来实现，这样能将外部文件放到浏览器的缓存中以便用户接下来访问其他页面。还可以使用动态内联的方式。

<b>规则9：减少DNS查找</b>

DNS解析也是开销，在DNS查找之前浏览器不能从主机名那里下载到任何东西，相应时间依赖于DNS解析器，他所能承担的请求压力，

你与它之间的距离和你的带宽速度。

实际中操作系统和浏览器做为缓存DNS查找记录，但是浏览器的Keep-Alive属性会覆盖操作系统的缓存过期时间。

<b>规则10-精简JavaScript</b>

Javascript我们精简和混淆，精简只是去掉代码中空白等。而混淆会对一些变量函数名进行修改。一般混淆是为了增加反向工程的

难度，但是也容易带来错误，一般我们不建议去混淆JavaScript代码。精简和混淆我们都可以借助一些工具来实现。

<b>规则11-避免重定向</b>

重定向就是从一个URL到另一个URL，它会使你的页面变慢。下面是一些使用重定向的典型解决方案：

2.连接网站：当我们改变网站后端逻辑的时候，很可能所需的url也变了，这时候就需要将用户从旧的url转移到新的url，这个时候

我们往往使用最多的也是重定向。我们应该尽量去避免。

3.跟踪内部流量

4.跟踪出战流量

5.美化url：有的时候某个url很复杂，不利用用户去输入，我们就提供一个友好的url来给用户，这个时候也会发生重定向。

<b>规则12-移除重复脚本</b>

该规则说的是同一个脚本被包含两次。

<b>规则13-配置ETag</b>

当网站被宿主在多于一台服务器上时，ETag头可能会阻碍缓存。

ETag：实体标签，是web服务器和浏览器用于确认缓存组件的有效性的一种机制。

<b>规则14-使用Ajax缓存</b>

确保Ajax请求遵守性能指导，尤其应具有长久的Expires头。

本文转自生鱼片博客园博客，原文链接：http://www.cnblogs.com/carysun/archive/2009/10/13/highperformance.html，如需转载请自行联系原作者