在使用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. 使用Nginx实现负载均衡

    使用Nginx实现负载均衡 一.nginx简介 nginx是一个高性能的HTTP服务器和反向代理服务器.它起初是俄罗斯人Igor Sysoev开发的,至今支撑者俄罗斯的很多大型的网站. 二.nginx ...

  2. seajs 源码阅读笔记

    代码概览 src目录文件列表如下: 代码以模块化的方式来组织,构建的时候会合并为一个js文件(sea.js 或 sea-debug.js),其中,intro.js和 outro.js 分别是这个js文 ...

  3. centos7 memcached+memagent 集群

    1. 安装libevent wget https://github.com/libevent/libevent/releases/download/release-2.0.22-stable/libe ...

  4. Request中的各种方法

    前言 Request中方法众多,对于Java Web程序员来说,种种方法都会在工作中常常用到.Request由于不是JDK的一部分,这些方法的用法也没有专门的API可以查,所以在工作中遇到Reques ...

  5. 谈谈.net模块依赖关系及程序结构

    技术为解决问题而生. 上面这个命题并非本文重点,我将来有空再谈这个.本文也并非什么了不起的技术创新,只是分享一下我对.net模块依赖关系及程序结构方面的一些看法.先看一个最最简单的hello worl ...

  6. Comet实现的网页聊天程序

    “上一篇”介绍了我在c/s程序中用了那些技术,如今只谈c/s不谈b/s那未免out了,势必要写一写b/s的程序与大家共勉. 回忆做技术这些年,06年每天盯着“天轰穿”的视频不亦乐乎,估计那是一代程序员 ...

  7. [每日电路图] 8、三轴加速度计LIS3DH电路图及功耗等指标

    看TI的官网资料:http://www.st.com/web/en/catalog/sense_power/FM89/SC444/PF250725 一.初次接触关注的信息: 1.1.概述中的关键信息 ...

  8. [异常解决] android studio检测不到手机的解决办法——ADB驱动自己安装

    用android studio搭建安卓开发环境比eclipse简单的多,仅仅下载一个1个G左右的安装包安装即可. 安装好之后随便建一个hello world工程,想用实体手机调试要点: 选择USB设备 ...

  9. php json与xml序列化/反序列化

    在web开发中对象的序列化与反序列化经常使用,比较主流的有json格式与xml格式的序列化与反序列化,今天想写个jsop的小demo,结果发现不会使用php序列化,查了一下资料,做个笔记 简单数组js ...

  10. PHP基础 创建

    注意:1.网页文件放在wamp中的www文件下: 2.www文件下不能出现中文: 网页浏览的方法: 1.没有建立站点:localhost/文件所在位置 2.建立站点: (1)站点-新建站点-打开对话框 ...