Chrome DevTools 之 Network,网络加载分析利器

虽然一直在用Chrome DevTools,但大多停留在常用的功能和调试上,比如Elements/Network/Sources/Console等主要功能,而对于性能分析/优化相关的Timeline/Profiles一直敬而远之,深感其门槛高,于是潜心阅读文档,以望窥得一二,以解决实际问题。

不同版本的Chrome DevTools差别很大,这篇文章基于最新版的Mac Chrome完成,主要介绍Network/Timeline/Profiles三个方面的内容,为后续的加载优化,性能优化做准备。

系统版本 & Chrome版本

之前写过一篇关于渲染性能的长文章,有兴趣的可以先阅读阅读。

Network有哪些功能?

Network主要有5个视窗,分别有不同的功能:
Controls 工具栏:用来控制Network的功能及外观。
Filters 筛选栏:根据筛选条件筛选请求列表,按住command/ctrl键可多选。
Overviews 概览:资源被加载过来的时间线,如果多条时间线垂直堆叠,表示多个资源被并行加载。
Request Table 请求列表:该视窗列出了所有的资源请求,默认按时间顺序排序,点击某个资源,可以查看更详细的信息。
Summary 总览:汇总了请求数量,传输数据大小,加载时间等信息。

Network视窗

默认情况下,Request Table 请求列表展示如下信息,当然,在请求列表的表头右键可以配置请求列表显示的内容。
Name:资源的名称。
Status:HTTP的状态码。
Type:资源的MIME类型。
Initiator:表示请求的上游,即发起者。Parser表示是HTML解析器发起的请求;Redirect表示是HTTP跳转发起的请求;Script表示是由脚本发起的请求;Other表示是由其他动作发起的请求,比如用户跳转或者在导航栏输入地址等。
Size:请求的大小,包括响应头和响应体的内容。
Time:请求的时间,从请求开始到请求完全结束。
Timeline:请求的时间线。

右键配置请求列表

怎么录制页面快照?

选中工具栏的快照图标,可以录制页面快照。


录制快照

选中某一个快照,在概览/请求列表出现的黄色竖线,就是该快照被捕捉的真实时间,双击快照可以放大。


快照捕获时间

DOMContentLoaded事件/Load事件的区别?

DOMContentLoaded事件 页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,它在两个地方都有体现:概览视窗的蓝色竖线,总览视窗的触发时间。
Load事件 当所有资源加载完成后触发的,它在三个地方有体现:概览视窗的红色竖线,请求列表视窗的红色竖线,总览视窗的触发时间。

DOMContentLoaded/Load事件

结合DOM文档加载的加载步骤,DOMContentLoaded事件/Load事件触发时机如下:

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。// 部分脚本会阻塞页面的加载
  4. DOM树构建完成。//DOMContentLoaded 事件
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load 事件

资源请求明细包含了哪些信息?

点击请求列表某个请求的名称,可以查看该请求的详细信息。详细信息主要有4个方面:
Headers:资源的HTTP头
Preview:预览JSON/image/text资源
Response:资源的HTTP响应头
Timing:资源的请求生命周期
Cookies:查看HTTP请求头和响应头附带的cookie信息

查看HTTP头:包含了资源的请求URL,HTTP方法,响应的状态码。此外,还列出了HTTP请求头和响应头及其值,以及请求参数。


HTTP头

查看HTTP响应内容:可以清楚的看到HTTP请求的返回结果。


HTTP响应

资源预览:没什么好讲的,可以查看JSON/image/text等资源。


资源预览

Cookies:该域名下存储的cookie信息,其中包含了cookie的特性。


Cookies

Name:cookie的名称。
Value:cookie的值。
Domain:cookie所属域名。
Path:cookie所属URL。
Expire/Max-Age:cookie的存活时间。
Size:cookie的字节大小。
HTTP:表示cookie只能被浏览器设置,而且JS不能修改。
Secure:表示cookie只能在安全连接上传输。

Timing:查看资源请求的生命周期,包含Queing/Stalled/Request/Response/Request sent/Waiting/Content Download各个阶段。

Timeing

如何查看资源请求的上游和下游?

按时shift键,鼠标hover在请求上,可以查看请求的上游和下游,如下图所示,hover在common.js上,可以看到有一个绿色请求、一个红色请求。其中绿色请求表示common.js的上游请求,即谁触发了common.js请求,红色请求表示common.js的下游请求,即common.js又触发了什么请求。

查看上下游请求

想对请求列表排序?

请求列表的资源默认是按照起始时间排序,最上面的请求最先发起。点击表头的Timeline可以重新排序,主要有如下几个维度。
Timline - Start Time:按请求的发起时间排序。
Timline - Response Time:按请求的响应时间排序。
Timline - End Time:按请求的结束时间排序。
Timline - Total Duration:按请求的总耗时排序,可以快捷的找出耗时最多的资源。
Timline - Latency:按请求的延迟排序,延迟是指请求发起的时间到响应开始的时间,可以快捷的找出请求等待时间最长(TTFB)的资源。

按Timeline排序

想对请求进行筛选?

通过筛选视窗可以对请求进行多维度的筛选,按住Command/Ctrl键可以同时选择多个筛选条件。

多个筛选条件

此外,筛选框可以实现很多定制化的筛选,比如字符串匹配,关键词筛选等,其中关键词筛选主要有如下几种:
domain:筛选出指定域名的请求,不仅支持自动补全,还支持*匹配。
has-response-header:筛选出包含指定响应头的请求。
is:通过is:running找出WebSocket请求。
larger-than:筛选出请求大于指定字节大小的请求,其中1000表示1k。
method:筛选出指定HTTP方法的请求,比如GET请求、POST请求等。
mime-type:筛选出指定文件类型的请求。
mixed-content:筛选出混合内容的请求(不懂啥意思)。
scheme:筛选出指定协议的请求,比如scheme:http、scheme:https。
set-cookie-domain:筛选出指定cookie域名属性的包含Set-Cookie的请求。
set-cookie-name:筛选出指定cookie名称属性的包含Set-Cookie的请求。
set-cookie-value:筛选出指定cookie值属性的包含Set-Cookie的请求。
status-code:筛选出指定HTTP状态码的请求。

主流的几个筛选截图如下:


domain筛选
has-response-header筛选
larger-than筛选
method筛选
Mime-type筛选
set-cookie-name筛选

如何模拟不同的网络环境?

Network > Filters 筛选栏下有可以模拟不同网络环境下的选项,对于模拟测试低网速环境,以及针对低网速环境做加载优化很有帮助。

模拟网络环境

如何清除缓存和Cookie?

在Network的请求列表视窗中,右键也提供了清除Cookie和缓存的选项。


Paste_Image.png

另外,调试模式下,强烈建议勾选Disable cache选项,以避免缓存引起的一些诡异问题。

系列文章
Chrome DevTools 之 Timeline,快捷性能优化工具
Chrome DevTools 之 Profiles,深度性能优化必备

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,394评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • API定义规范 本规范设计基于如下使用场景: 请求频率不是非常高:如果产品的使用周期内请求频率非常高,建议使用双通...
    有涯逐无涯阅读 2,517评论 0 6
  • iOS网络编程读书笔记 Facade Tester客户端门面模式的实例(被动版本化) 被动版本化,所以硬编码URL...
    melouverrr阅读 1,598评论 3 7
  • 看了一部很温馨的美国剧情片《一只狗的使命》,剧情很简单,通过一只可爱的狗狗的三世轮回来领悟生命的意义,可以把个看做...
    石林析阅读 307评论 0 1