Chrome DevTools 之 Network,网络加载分析利器
虽然一直在用Chrome DevTools,但大多停留在常用的功能和调试上,比如Elements/Network/Sources/Console
等主要功能,而对于性能分析/优化相关的Timeline/Profiles
一直敬而远之,深感其门槛高,于是潜心阅读文档,以望窥得一二,以解决实际问题。
不同版本的Chrome DevTools差别很大,这篇文章基于最新版的Mac Chrome完成,主要介绍Network/Timeline/Profiles
三个方面的内容,为后续的加载优化,性能优化做准备。
之前写过一篇关于渲染性能的长文章,有兴趣的可以先阅读阅读。
Network有哪些功能?
Network主要有5个视窗,分别有不同的功能:
Controls 工具栏
:用来控制Network的功能及外观。
Filters 筛选栏
:根据筛选条件筛选请求列表,按住command/ctrl
键可多选。
Overviews 概览
:资源被加载过来的时间线,如果多条时间线垂直堆叠,表示多个资源被并行加载。
Request Table 请求列表
:该视窗列出了所有的资源请求,默认按时间顺序排序,点击某个资源,可以查看更详细的信息。
Summary 总览
:汇总了请求数量,传输数据大小,加载时间等信息。
默认情况下,Request Table 请求列表
展示如下信息,当然,在请求列表的表头右键可以配置请求列表显示的内容。
Name
:资源的名称。
Status
:HTTP的状态码。
Type
:资源的MIME类型。
Initiator
:表示请求的上游,即发起者。Parser
表示是HTML解析器发起的请求;Redirect
表示是HTTP跳转发起的请求;Script
表示是由脚本发起的请求;Other
表示是由其他动作发起的请求,比如用户跳转或者在导航栏输入地址等。
Size
:请求的大小,包括响应头和响应体的内容。
Time
:请求的时间,从请求开始到请求完全结束。
Timeline
:请求的时间线。
怎么录制页面快照?
选中工具栏的快照图标,可以录制页面快照。
选中某一个快照,在概览/请求列表出现的黄色竖线,就是该快照被捕捉的真实时间,双击快照可以放大。
DOMContentLoaded事件/Load事件的区别?
DOMContentLoaded事件
页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件
,它在两个地方都有体现:概览视窗的蓝色竖线,总览视窗的触发时间。
Load事件
当所有资源加载完成后触发的,它在三个地方有体现:概览视窗的红色竖线,请求列表视窗的红色竖线,总览视窗的触发时间。
结合DOM文档加载的加载步骤,DOMContentLoaded事件/Load事件
触发时机如下:
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。// 部分脚本会阻塞页面的加载
- DOM树构建完成。//
DOMContentLoaded 事件
- 加载图片等外部文件。
- 页面加载完毕。//
load 事件
资源请求明细包含了哪些信息?
点击请求列表某个请求的名称,可以查看该请求的详细信息。详细信息主要有4个方面:
Headers
:资源的HTTP头
Preview
:预览JSON/image/text资源
Response
:资源的HTTP响应头
Timing
:资源的请求生命周期
Cookies
:查看HTTP请求头和响应头附带的cookie信息
查看HTTP头:包含了资源的请求URL,HTTP方法,响应的状态码。此外,还列出了HTTP请求头和响应头及其值,以及请求参数。
查看HTTP响应内容:可以清楚的看到HTTP请求的返回结果。
资源预览:没什么好讲的,可以查看JSON/image/text等资源。
Cookies:该域名下存储的cookie信息,其中包含了cookie的特性。
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
各个阶段。
如何查看资源请求的上游和下游?
按时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)的资源。
想对请求进行筛选?
通过筛选视窗可以对请求进行多维度的筛选,按住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状态码的请求。
主流的几个筛选截图如下:
如何模拟不同的网络环境?
Network > Filters 筛选栏
下有可以模拟不同网络环境下的选项,对于模拟测试低网速环境,以及针对低网速环境做加载优化很有帮助。
如何清除缓存和Cookie?
在Network的请求列表视窗中,右键也提供了清除Cookie和缓存的选项。
另外,调试模式下,强烈建议勾选Disable cache
选项,以避免缓存引起的一些诡异问题。
系列文章
Chrome DevTools 之 Timeline,快捷性能优化工具
Chrome DevTools 之 Profiles,深度性能优化必备
from: http://www.jianshu.com/p/471950517b07
Chrome DevTools 之 Network,网络加载分析利器相关推荐
- iOS网络加载图片缓存策略之ASIDownloadCache缓存优化
iOS网络加载图片缓存策略之ASIDownloadCache缓存优化 在我们实际工程中,很多情况需要从网络上加载图片,然后将图片在imageview中显示出来,但每次都要从网络上请求,会严重影响用户体 ...
- Flutter Image从网络加载图片刷新、强制重新渲染
Flutter自带的Image.network()从网络加载图片后,如果服务器上的图片改变了,但是url没变,就算使用setState进行rebuild,图片也不会跟着更新.这是因为Image自带了c ...
- 网络加载框架 - Retrofit
Retrofit是什么? Retrofit其实我们可以理解为OkHttp的加强版,它也是一个网络加载框架.底层是使用OKHttp封装的.准确来说,网络请求的工作本质上是OkHttp完成,而 Retro ...
- jnlp(Java网络加载协议)原来很简单
jnlp(Java网络加载协议)原来很简单 Java Network Launching Protocol (JNLP,java网络加载协议). jnlp是什么?是java提供的一种让你可以通过浏览器 ...
- java网络加载协议JNLP的应用
JAVA WEB Start技术我们在网络上很多地方看到过,包括一些自动更新功能也是用这项技术. jnlp是什么?是java提供的一种让你可以通过浏览器直接执行java应用程序的途径,它使你可 ...
- mac网页java无法加载,chrome浏览器mac版无法加载怎么办_chrome浏览器mac版打不开网页解决方法-win7之家...
对于使用苹果电脑的用户来说,想要安装chrome浏览器时,就需要选择相应版本的mac版chrome浏览器,然而最近有些用户在使用chrome浏览器mac版时却出现了无法加载,打不开网页的问题,那么ch ...
- CANoe软件使用(二)——数据加载分析
CANoe软件使用(二)--数据加载分析 目录 新建CANoe工程 DBC和通道加载 数据分析 离线设置 数据查看 数据保存 目录 本节主要讲述下离线的CAN数据分析.通常情况下,工程师通过CANoe ...
- 【Android 安全】DEX 加密 ( 不同 Android 版本的 DEX 加载 | Android 8.0 版本 DEX 加载分析 | Android 5.0 版本 DEX 加载分析 )
文章目录 一.不同版本的 DEX 加载 1.Android 8.0 版本 DEX 加载分析 2.Android 6.0 版本 DEX 加载分析 3.Android 5.0 版本 DEX 加载分析 一. ...
- java加载自己写的类_java 自定义类加载器从磁盘或网络加载类
一.编写自定义类加载器类 package com.mybatis.entity; import java.io.ByteArrayOutputStream; import java.io.File; ...
最新文章
- 打造全球最大规模 Kafka 集群,Uber 的多区域灾备实践
- php 表单变量,PHP学习笔记——访问表单变量
- lstm网络python代码实现
- Linux中如何运行.AppImage文件
- 如何卸载MySQL8.0.11_win10安装mysql8.0.11卸载5.7
- nginx 开启gzip压缩--字符串压缩比率很牛叉
- 浅谈Vue中的虚拟DOM
- 新泰一中2021年高考成绩查询,牛!泰安新泰一中2018年高考一班级62人全部上本科线...
- Java集合框架源码解读(5)——TreeMap
- Supervisor的作用与配置
- 跳过密码卸载OfficeScan
- 好工具,不私藏!介绍一个提高效率的利器
- 风灵月影捆绑软件解决办法(修改器)
- 中国电信计算机类校园招聘笔试题目,中国电信集团2019校园招聘笔试真题(计算机技术类-A卷)(精选).doc...
- 如何给 ReactJS 应用增加配置文件?
- 环境和社会风险分类c类_企业经营风险的定义、种类以及基本分类
- 「标签管理」使用标签管理有道云笔记资料
- ClickHouse在各大厂的最佳实践
- 在Chrome安装Edge的插件
- 其实macbook装win7很简单