Web Performance工具 - HTTPWatch

性能分析往往离不开工具，而关于Web性能的分析，这里面最重要的工具非HTTPWatch莫属。

HTTPWatch是一个分析网页显示过程中所有页面资源载入的流水图，下图是我访问google所得到的：

通过这个图可以得到页面显示过程中，页面资源载入的过程，包括JavaScript, CSS, 图片各种资源载入的顺序，是否是并行，是否是串行。同时也能看的到各个资源载入的具体情况，是否是从浏览器缓存中读取还是从远程服务器下载过来，是否gzip，以及服务器响应的HTTP code。

下面具体来看看单个HTTP请求的详细信息：

一个HTTP请求往往包括下面四个方面：

DNS解析：将域名（如www.google.com ）解析成静态ip。

建立连接：和服务器建立TCP/IP连接，如果是HTTPs连接还要包括SSL handshake的过程。

等待时间：包括网络延时和服务器处理给出响应的时间。

读取时间：资源下载所花费的时间。

可以看出来只有很少的一部分时间是花费在用来读取资源上面的，而其他大部分时间是用来处理其他事情的，这部分时间就是网络传输的overhead。所以Web Performance Rule中最重要的就是减少HTTP请求数，就是为了减少不必要的overhead。这部分我会在后面的文章里面详细介绍。

在每个HTTP请求里面，我们都可以看到非常详细的信息，包括header，cookie，cache，内容等等。header的信息对于分析web performance非常重要。例如下面一个例子：

左边是发出的请求header，右边是接收的响应header。

左边一些主要的信息包括：

1）资源的url

2）Accept-Encoding: gzip, deflate: 浏览器可以支持gzip

3）Connection: keep-alive: 这个表明连接是会一直保持，这个可以减少很多的overhead

4）User-Agent: Mozila/5.0 (xxx)：这里可以得到非常详细的浏览器信息，对于确认客户浏览器版本非常有意义

右边的一些信息包括：

1）HTTP code

2）Content-Encoding: gzip: 表明服务器端启用了gzip

3）Content-Type: 资源类型，JavaScript， CSS 或者是图片

4）Expires：表明服务器启用了缓存，设置了过期时间

HTTPWatch还有一个非常重要的用处，就是可以看到资源载入的顺序和并行、串行的情况。下面是sina首页载入的一个片段：

这里面可以看到一个非常重要的现象：JavaScript是串行载入的，而图片和CSS文件是可以并行载入的，并发数是由浏览器决定的。通常情况下IE6、IE7同一域名的并发请求数是2，而firefox是6-8。

HTTPWatch的基本功能就介绍到这里，当然也有很多类似的工具，最有名的当属firebug的网络面板，如下图：

学会使用类似工具来进行分析，往往是Web性能分析最最基本和重要的一个部分。快快自己动手，Enjoy it！