ASP.NET站点性能提升-宏观分析

ASP.NET站点性能提升系列内容来自《asp.net site performace secretes》。

使用瀑布图进行宏观分析
这里使用Firefox和Firebug生成瀑布图。

Firefox安装程序：http://www.mozilla.com/

Firebug安装程序：https://addons.mozilla.org/en-US/firefox/addon/1843/

在Firefox中使用快捷键F12，打开Firebug。点击“网络”，选择“启用”。浏览页面，Firebug会生成瀑布图。





将鼠标放到某一请求上，我们可以看到加载一个页面的时间由以下几个部分组成：

域名解析。
建立连接。
发送请求。Firefox会限制同时发起的请求数量。如果达到这个最大数据，Firefox就会对请求进行排队。
等待响应。
接收数据。
‘DOMContentLoaded’事件。从域名解析到整个DOM就绪的时间。DOM就绪时，就可以使用js操作页面元素了，即使一些元素还在加载中。
‘Load’事件。从域名解析到整个页面完全加载的时间。这时页面完全加载完毕，包括图片。
使用瀑布图将瓶颈分类：

首页生成时间过长。瀑布中，紫色的部分（等待响应时间）表示浏览器在它接收到第一个字节前等待的时间。这段时间会延迟其它组件的下载，因为是首页告诉浏览器加载哪些图片、JavaScript、CSS文件等。
首页加载时间过长。灰色部门表示首页通过Internet加载整个页面时间过长。这会延迟加载首页底部的图片和其它文件。
图片（包括flash）加载时间过长。浏览器下载图片时，会并行下载，但会有一个并发请求限制。如果一个页面上有很多图片，一些图片必须等到其它图片加载完后，才能加载，这样就增加了页面加载时间。
JavaScript和CSS阻塞页面渲染。当一个外部JavaScript文件开始加载时，页面其它部分的渲染会停止。这样，页面后部的JavaScript就可以引用这个JavaScript了。CSS也会阻塞页面渲染，以保证用户不会看到“裸”页面。




首页生成时间过长瀑布图





首页加载时间过长瀑布图





图片加载时间过长瀑布图