分类: 知道 常识词典 编辑 : 常识 发布 : 11-10

阅读 :299

firebug中时间线在前端开发性能优化里如何去分析以及应用？firebug的网络选项卡里有网站的资源请求时间线的信息，谁来仔细分析一下时间线在前端开发性能优化里如何去分析以及应用？时间线包括：域名解析，建立连接，发送请求，等待响应，接受数据 5个信息每隔时间线的信息 有两个 一个是从什么时间点开始 一个是花费了多少时间。请各位WEB工程师尽情分享吧 谢谢~~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、C-rome为了提高速度，分别修改为10、6、6（根据具体版本可能有所变化）。

下一篇:有没有女生跟你暗示跟你交往，但你却SB的错过了的？ 下一篇 【方向键 ( → )下一篇】

上一篇:声明个人很喜欢新知，眼见新知偏离社交化问答的轨迹越走越远，不知如何是好？ 上一篇 【方向键 ( ← )上一篇】