chrome dev debug network 的timeline说明

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

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

 

image

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

image

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

Proxy

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

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

image

DNS Lookup

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

Blocking

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

Connecting

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

Sending

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

Waiting

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

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

Receiving

接收数据时间

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




本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/p/3668877.html,如需转载请自行联系原作者

相关文章
|
6月前
|
Web App开发 JSON 前端开发
网络调试利器:Chrome Network工具的详细指南
Chrome开发者工具的Network面板是测试工程师的利器,用于监视HTTP请求、响应及资源加载。打开它可通过右键点击页面选择“检查”或使用快捷键。界面包含请求列表和详细信息,如Headers、Preview、Response、Timing。过滤器帮助定位特定请求,而瀑布流图展示加载顺序。模拟网络环境和保存HAR文件功能便于性能分析和问题排查。
|
Web App开发 SQL JavaScript
【性能】7分钟带你了解【尤大】都在使用的 Chrome Runtime Performance Debug!
前段时间用Vue3开发了一个线上标准的项目,也都已经提测了,最近可以抽时间来整理一下项目中用到的技术栈,( 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】。 在开发之前特地重温了一下18年尤大的VUE CONF(杭州),过程中发现尤大使用到了这个Performance去分析JavaScript每一帧的计算,之前知道这个工具,但是平时基本不怎么用,借此机会学一下并做一些记录。
235 0
|
Web App开发
Chrome操作指南——入门篇(十一)network
Chrome操作指南——入门篇(十一)network
Chrome操作指南——入门篇(十一)network
|
Web App开发 JavaScript 前端开发
VS Code 折腾记 - (17) Debug for Chrome(附加模式[支持浏览器插件的使用])
很早以前就撸过一篇帖子,也是说这个的,但是那时候只是用最傻瓜化的直白的姿势. 新窗口模式,而且配置文件用的是临时文件,拓展这些更是不能用. 用起来感觉不是很好,但时隔一年多,不管是vscode还是当初的插件都完善了很多. 研究了下附加模式,并让拓展也能正常使用的姿势(挺简单的). 用到的插件VSCode插件:
492 0
chrome16调试-network面板
chrome16调试-network面板
84 0
chrome16调试-network面板
chrome17-使用network进行详细分析
chrome17-使用network进行详细分析
182 0
chrome17-使用network进行详细分析
chrome18-使用network waterfall分析页面载入性
chrome18-使用network waterfall分析页面载入性
326 0
chrome18-使用network waterfall分析页面载入性
|
Web App开发 监控 JavaScript
Chrome开发者工具Debug入门
译者按: 手把手教你摆脱console.log,掌握高级的debug方法。 原文: Learn How To Debug JavaScript with Chrome DevTools 译者: Fundebug 为了保证可读性,本文采用意译而非直译。
1094 0
|
Web App开发 内存技术