firebug中时间线在前端开发性能优化里如何去分析以及应用？
2012-01-19 18:27:07   来源：   点击：

1 个答案

• 答案 1：

  网络选项卡一条请求的URL包含：

  1.请求类型(GET|POST)

  2.请求地址(鼠标悬浮在URL列上时会完整显示)

  3.状态及其描述(200 ok)

  4.所属域名

  5.资源大小

  6.图形化的时间线

  firebug的时间线以瀑布图的形式展现，很直观，而当你把鼠标悬浮在时间线上的时候，就会弹出该条时间线的详情的tips，这个tips包含5个阶段和2个事件：* DNS Lookup：DNS查询时间* Connection：创建一个TCP链接花掉的时间* sending：向服务器发送请求需要的时间* Waiting ：等待服务器响应* Receiving：从服务器获取文件消耗的时间* DOMContentLoaded： 事件，DOMContentLoaded事件完成的时间* Load：事件，页面load事件完成的时间

  有了这些信息，我们就能初步诊断网站的性能瓶颈。

  1）首先看一下哪个请求花费的时间比较长，看看这个请求的时间线信息，确定是服务器响应慢了还是网络的问题。

  2）如果每个请求所花费的时间都没有明显高于其他，那么就看一下是不是页面的Http请求总数太多了。因为浏览器对单个域名的并发连接数是有限制的，需要处理完一批请求再发送另一批请求。假设页面有100个请求，每个请求花费1s，浏览器最大并发数限制为10个，那么处理完所为请求就需要100/10*1s=10s的时间。

  关于最大并发数，Http1.1的标准是2，而目前主流的浏览器IE、FireFox、Chrome为了提高速度，分别修改为10、6、6（根据具体版本可能有所变化）。