chrome dev debug network 的timeline说明

在使用chrome的时候F12的开发者工具中有个network,其中对每个请求有个timeline的说明,当鼠标放上去会有下面的显示:

 

这里面的几个指标在说明在chrome使用文档有说明:

下面我用人类的语言理解下:

Proxy

与代理服务器的连接时间。

比如我使用了switch proxy搭建了一个gae,本地启动的goagent就是proxy server。我的所有页面请求都和这个goagent进行下交互才确定的,所以这里的Proxy所花费的时间就是和goAgent交互的时间了。

DNS Lookup

很明显,DNS查询的时间,当本地DNS缓存没有的时候,这个时间可能是有一段长度的,但是比如你一旦在host中设置了DNS,或者第二次访问,由于浏览器的DNS缓存还在,这个时间就为0了。

Blocking

浏览器发请求前本地的操作时间,比如去缓存中查看页面缓存等。

Connecting

建立TCP连接的时间,就相当于客户端从发请求开始到TCP握手结束这一段,包括DNS查询+Proxy时间+TCP握手时间。

Sending

发送请求时间,这个时间一般很小,当然如果POST请求,请求体比较大,那么这个时间段就会比较长了。

Waiting

发送请求完毕到接收请求开始的时间。

这个时间段就代表服务器处理和返回数据网络延时时间了。服务器优化的目的就是要让这个时间段尽可能短。

Receiving

接收数据时间

返回的数据比较大,那么这个接收时间就比较大

时间: 2024-12-04 19:22:47

chrome dev debug network 的timeline说明的相关文章

谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer

Google Chrome在招来了FireFox,FireBug的项目组领导人John J. Barton后,Chrome Dev Tools也变的越来越好用,越来越方便了.本文根据Google I/O上对Chrome Dev Tools的介绍(http://www.youtube.com/watch?v=N8SS-rUEZPg),和相关PPT:http://chrome-devtools-io2011.appspot.com/template/index.html 整理而来.(参照的Chrom

谷歌推出 JS 和 Dart 编辑器 Chrome Dev Editor

在今年的Google I/O 2014大会上,Google推出了基于Chrome浏览器的JavaScript和Dart的编辑器Chrome Dev Editor(CDE),非常强大,它致力于帮助开发者快速地开发Chrome Web应用. 基于Dart编写成的CDE开发工具同时也使用了Google今年主推的前端组件开发平台Polymer,集成Git和移动开发功能. 预览版下载:https://chrome.google.com/webstore/detail/chrome-dev-editor-d

最新升级的Chrome DEV版在Win7下面中文发虚的问题的解决办法

最近把Chrome升级,不过,却是让我很是纠结,因为中文显示会发虚,完全看不清字.英文是绝对没问题的.具体应该是ClearType导致的,关闭了的话,就好了.但是,我不可能因为它一个浏览器,而让我去关闭掉ClearType,这回让我在VS里面很难受的. 总的来说,解决办法有二:1.关闭ClearType:2.安装Force Microsoft Yahei Font插件,进入商店搜索即可,安装之后,就好了,不过字体看起来不是那么舒服就是了.

通过chrome浏览器控制台(Console)进行PHP Debug的方法_php技巧

 效果如下图 PHP Console是一款可以帮助用户模拟真实的PHP网站运行环境,帮助用户使用Chrome插件对PHP代码进行调试的Chrome插件,用户在Chrome中安装了PHP Console插件以后,可以在自己的PHP项目中引用PHP Console项目代码,并输出调试信息,让PHP Console插件进行捕获,这样在网站发布成功以后,还可以使用PHP Console插件进行输出调试信息到Chrome浏览器中,用户可以通过PHP Console插件来查看这些来自于PHP服务器发来的调试

Chrome 控制台不完全指南

Chrome 控制台不完全指南 Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「Console大法好」 console.log 大家都会用log,但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理. 他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更语义化. 各个所代

Chrome 控制台不完全指南(转)

  Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「Console大法好」 console.log 大家都会用log,但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理. 他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更语义化. 各个所代表的语义如下: consol

Chrome浏览器 各种版本Chrome浏览器的特点

当网友尝试下载使用Chrome时,才发现Chromium版本众多,版本号更是一周升级一次,那些Chromium.Dev.Beta.Stable等名词让人很难选择到底自己适合使用哪一款.事实上,Chrome是一款开源浏览器软件,它能够为不同系统平台/用户提供各种版本.通常来说,最早释出的是Chromium,经过功能改进和Bug修复后可依次上升为Chrome Dev.Beta,最终定格为Chrome Stable稳定版. 众所周知,互联网巨人谷歌公司除了搜索引擎外,还涉足很多其他领域,Chrome浏

开启Chrome 19的Chrome To Mobile

以前,如果你想将正在Chrome中浏览的网页发送到手机上,需要为Chrome安装一款插件.现在,Chrome Dev已经原生支持"Chrome To Mobile"功能.要使用这个功能,需要Chrome登录如自己的gmail帐号,同时手机上要安装"Chrome fo Android",并也登录如gmail帐号.完成PC和手机端Chrome的同gmail帐号绑定后,即可按如下操作进行. 已知在版本"19.0.1084.15"中,这个功能默认未开启,

最新版Chrome暗藏3个官方网络应用

在最新的Chrome Dev 分支中(6.0.437.3),已经默认内置了3个Google 官方的Web Apps(网络应用),你可以在 Chrome 的安装目录下找到这3个 Web Apps,分别是 Gmail.Google Docs 和 Google Calender,Windows 平台的路径如下(最简单的办法是直接在快捷方式上点击右键--打开文件位置再定位到相应的目录): C:Documents and Settings[Username].[Computername]Local Set