chrome dev debug network 的timeline说明

原文:http://www.cnblogs.com/yjf512/p/3668877.html

在使用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

接收数据时间

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

chrome dev debug network 的timeline说明

时间: 2024-09-29 21:12:34

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

chrome dev tools

chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧 Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具.可以有效的追踪布局的问题,为javascript设置断点并对程序进行优化 ====打开方式====Ctrl+Shift+I  打开/关闭调试工具.(显示的是上次关前的tab)Ctrl+Shift+J  打开/关闭调试工具的Console页Ctrl+Shift+C  打开调试工具Elements页 在此

Chrome Dev Tools :成为更高效的开发人员

原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保存变更历史版本. 保存变更历史版本: 同时支持可以在Chrome 载入的Css文件正文中自由的修改. 网络交互 当一个页面载入时,所有发出的请求可以在“Network”里监听到,同时下面有”All”, “Documents”, ”Stylesheets”, “Images”, “Scripts”,

谷歌 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

Getting started with Chrome Dev Editor

转自:https://github.com/GoogleChrome/chromedeveditor/blob/master/doc/GettingStarted.md Installation Install Chrome Dev Editor on Chrome Open Chrome Dev Editor from the Chrome App Launcher or chrome://apps Git workflow Click on the Menu icon and select 

Chrome Dev Editor:一个新的JavaScript和Dart IDE

在Google IO 2014期间,一位Google工程师带来了Chrome Dev Editor(CDE).该IDE用于创建面向桌面和移动设备的Chrome应用程序和Web应用程序.CDE支持JavaScript和Dart. Chrome Dev Editor是Google试图简化开发的又一款工具,它本身就是作为一个Chrome应用程序构建.它可以从Chrome Web商店安装,而且带有若干模板,用于为使用Polymer的JavaScript应用程序.Polymer组件.Web Starter

Chrome开发工具Network没有显示完整的http request和response对话

Chrome开发工具Network没有显示完整的http request和response对话 这几天看<http defintion guide>介绍Authorization和www-Authorization的机制时不是很理解,因此自己动手做实验,从而发现了Chrome开发工具Network一点有趣的小问题,特此记录. Authorization和www-Authorization是http header,用于对客户端用户的身份认证,过程如下图. (1)client向server发出re

[Tools] Create your own mobile emulator device by using Chrome dev tool

Using the New Device Emulation Interface The Device Emulation interface changed a bit with the newer version of Chrome Dev Tools. Here are the instructions for emulating the required device characteristics in the new UI: Select Edit from the Responsi

Python爬虫知识点——Chrome开发者工具Network

Chrome开发者工具中Network功能介绍 第一列Name:请求的名称,一般会将URL的最后一 部分内容当作名称. 第二列Status: 响应的状态码,这里显示为200,代表响应是正常的.通过状态码,我们可   以判断发送了请求之后是否得到了正常的响应. 第三列Type: 请求的文档类型.这里为document, 代表我们这次请求的是一个HTML文档,内容就是一些HTML代码. 第四列initiator: 请求源.用来标记请求是由哪个对象或进程发起的. 第五列Size: 从服务器下载的文件和

页面性能分析-Chrome Dev Tools

一.分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...).资源类型.资源大小.资源时间线等情况 Performance : 页面各项性能指标的火焰图,这里能看到白屏时间.FPS.资源加载时间线.longtask.内存变化曲线等等信息 Memory : 可以记录某个时刻的页面内存情况,一般用于分析内存泄露 JavaScript Profiler : 可以记