在使用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. 【Win10 UWP】后台任务与动态磁贴

    动态磁贴(Live Tile)是WP系统的大亮点之一,一直以来受到广大用户的喜爱.这一讲主要研究如何在UWP应用里通过后台任务添加和使用动态磁贴功能. 从WP7到Win8,再到Win10 UWP,磁贴 ...

  2. SQL提示介绍-强制并行

    查询提示一直是个很有争议的东西,因为他影响了sql server 自己选择执行计划.很多人在问是否应该使用查询提示的时候一般会被告知慎用或不要使用...但是个人认为善用提示在不修改语句的条件下,是常用 ...

  3. Asp.net下使用HttpModule模拟Filter，实现权限控制

    在asp.net中,我们为了防止用户直接从Url中访问指定的页面而绕过登录验证,需要给每个页面加上验证,或者是在模板页中加上验证.如果说项目比较大的话,添加验证是一件令人抓狂的事情,本次,我就跟大家分 ...

  4. 我的第一篇Markdown语法博客

    这是我的第一篇使用markdown语法编写的博客 使用的编辑器为Sublime Text2 并且使用了sublog插件, sublog是一个开源项目 sublog 并且参考了作者的博客 AmongOt ...

  5. ActiveMQ第六弹:设置多个并行的消费者

    消息队列本来就是一种经典的生产者与消费者模式.生产者向消息队列中发送消息,消费者从消息队列中获取消息来消费. 消息的传送一般由一个代理来实现的,那就是Message broker(即消息代理).Mes ...

  6. Springlake-01 介绍&功能&安装

    1. 简介与功能 1)Springlake 是一个企业内容平台SECP 2)是一个可配置的系统,80%内容可以配置 3)允许建立和配置垂直解决方案 4)敏捷和占用空间小,可伸缩 5)端到端的安全性与性 ...

  7. Java连接Oracle数据库开发银行管理系统【二、设计篇】

    一.总体分析     此系统的实现并不难,但是如何更好的设计出实现方式还是需要更深入的分析,例如:如果再增加其他功能,是不是需要变动的 代码很少,只是直接再增加一点功能就可以了呢?如果使用的不是Ora ...

  8. PHP 基础

    var_dump(empty($a));    判断变量是否为空 var_dump(isset($a));      判断变量是否定义 $a=10;unset($a);      删除变量 var_d ...

  9. iOS-----Xcode-Debug尝试

    在Xcode中,Debug时,不能像eclipse ,或VS那些集成开发那样,能直接查看变量的值.那怎么在调试的时候查看XCode的变量呢? 有一些方法的. 1.新建一个Single View App ...

  10. Git使用相关

    Git使用相关 使用git这么久还是时不时碰到小问题,根本原因在于没有仔细研究和做笔记 Git修改remote地址 之前一直使用的ssh的地址,估计是没配置好,每次都需要输密码烦死了,今天看到个用ht ...