在使用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说明的更多相关文章

  1. [Debug] Debug Node.js Application by using Chrome Dev tools

    For example you have a server.js file, and you want to debug some problems; What you can do is: node ...

  2. [Debug] How to Debug a NestJs Backend using the Chrome Dev Tools

    TO debug NestJS code with Chrome dev tool, we can run: node --inspect-brk dist/rest-api/src/main.js ...

  3. chrome dev tools

    chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...

  4. Chrome Dev Tools ：成为更高效的开发人员

    原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...

  5. Getting started with Chrome Dev Editor

    转自:https://github.com/GoogleChrome/chromedeveditor/blob/master/doc/GettingStarted.md Installation In ...

  6. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  7. 如何在Chrome下Debug Mocha的测试

    简介 经过前两篇文章的介绍,相信读者对Mocha应该有一定的认知了,本文重点讲述如何在Chrome下Debug Mocha Test, 方便你在测试fail的时候troubleshooting. 关键 ...

  8. chrome extensions & debug

    chrome extensions & debug debug background.js debug popup.js debug content_script.js chrome.stor ...

  9. Chrome Dev Editor：一个新的JavaScript和Dart IDE

    在Google IO 2014期间,一位Google工程师带来了Chrome Dev Editor(CDE).该IDE用于创建面向桌面和移动设备的Chrome应用程序和Web应用程序.CDE支持Jav ...

随机推荐

  1. 小谈 - web模仿手机打电话与正则表达式

    昨天遇到了一个很棘手的问题,就是手机端调用web端的页面,如果用编辑器插入的内容页面中有电话的的数据就要变一下格式,让手机端可以实现拨号的功能. 研究了半天就是没一点头绪,但是偶尔看到数据中每一个电话 ...

  2. 让Entity Framework启动不再效验__MigrationHistory表

    Entity Framework中DbContext首次加载OnModelCreating会检查__MigrationHistory表,作为使用Code Frist编程模式,而实际先有数据库时,这种检 ...

  3. git 修改管理

    查看修改: 撤销某一文件的修改(还没提交): 撤销所有文件的修改: git checkout .

  4. ios 向工程里添加Fonts

    ios 向工程里添加Fonts 1.网上搜索字体文件(后缀名为.ttf,或.odf),假如你加入的字体为微软雅黑 2.把字体库导入到工程的resouce中 3.然后在你的工程的Info.plist文件 ...

  5. 中小公司PMO不一样期间的责任

    中小公司,又称中小型公司或中小企,它是与所在行业的大公司对比在人员规划.财物规划与运营规划上都对比小的经济单位.此类公司一般可由单自个或少数人供给资金构成,其招聘人数与营业额皆不大,因此在运营上多半是 ...

  6. 缓存篇~第六回　Microsoft.Practices.EnterpriseLibrary.Caching实现基于方法签名的数据集缓存

    返回目录 这一讲中主要是说EnterpriseLibrary企业级架构里的caching组件,它主要实现了项目缓存功能,它支持四种持久化方式,内存,文件,数据库和自定义,对于持久化不是今天讨论的重要, ...

  7. Android开发学习之路-下拉刷新以及GridView的使用

    GridView是类似于ListView的控件,只是GridView可以使用多个列来呈现内容,而ListView是以行为单位,所以用法上是差不多的. 主布局文件,因为要做下拉刷新,所以加了一个Prog ...

  8. 【管理心得之三十二】PMP杂谈---------爱情必胜术

    这次一反常态,没有场景设计,我想借此文普及一下PMP是什么? 但我不知道这样枯燥的话题能否能引起你的兴趣,我不得不套用“标题党”<爱情必胜术>来博你眼球. 我真没有说谎,此文是献给那些孤身 ...

  9. Tomcat源码阅读（二）初始化

    近来,我开始阅读tomcat的源码,感觉还挺清晰易懂:为了方便理解,我参考了网上的一些文章,把tomcat的组成归纳一下:整个tomcat的组成如下图所示: Tomcat在接收到用户请求时,将会通过以 ...

  10. Python中的运算符

    说完常用的数据类型,再来说下运算符.运算符用于将各种类型的数据进行运算,让静态的数据跑起来. 编程语言中的运算大致分为以下几个大类: 算术运算, 用于加减乘除等数学运算 赋值运算,用于接收运算符或方法 ...