1.写在前面
前面的博客我们介绍了一部分的HTTP的协议,但是由于篇幅的原因,没有继续写下去,今天我们继续书写接下来的内容。
2.如何用Chrome的Network面板分析HTTP报文
具体的内容如下图:
- 控制器:控制面板的外观和功能
- 过滤器:过滤请求列表中显示的资源
- 概览:显示HTTP请求、响应的时间轴
- 请求列表:默认时间排序,可选择显示列
- 概要:请求总数、总数据量、总花费时间等。
控制器
- 抓包
- 停止抓包
- 清除请求
- 要跨页面加载保存请求:Preserve log
- 屏幕截图:Capture sereenshots
- 重新执行XHR请求:右键点击请求选择Replay XHR
- 停用浏览器缓存
- 手动清除浏览器缓存:右键点击请求选择 Clear Browser Cache
- 离线模拟:Offline
- 模拟慢速网络连接:Network Throttling,可自定义网速
- 手动清除浏览器Cookie:右键点击请求选择Clear Browser Cookies
- 隐藏Filters窗格
- 影藏Overview窗格
过滤器:按类型
- XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Manifest或Other
- 多类型
- 按时间过滤:概览面板,拖动滚动条
- 隐藏Data URLs:CSS图片等小文件以BASE64格式嵌入HTML中,以减少HTTP的请求数。
过滤器:属性过滤
- domain:仅显示来自指定域的资源。你可以使用通配符字符(*)纳入多个域
- has-response-header:显示包含执行HTTP响应标头的资源。
- is:使用is:running 可以查找WebSocket资源,is:from-cahe可查找缓存读出的资源
- larger-than:显示大于执行大小的资源。将值设为100等同于设置为1K
- method:显示通过指定HTTP方法类型检索的资源。
- mime-type:显示指示MIME类型的资源。
- mixed-content:显示所有混合内容资源(mixed-content:all),或者仅显示当前显示的资源(mixed-content:displayed)
- scheme:显示通过未保护HTTP(scheme:http)或受保护HTTPS(scheme:https)检索的资源
- set-cookie-domain:显示具有Set-Cookie标头并且Domain属性与指定值匹配的资源。
- Set-cookie-name:显示具有Set-Cookie标头并且名称与指定至匹配的资源。
- Set-cookie-value:显示具有Set-Cookie标头并且值与指定值匹配的资源。
- status-code:仅显示HTTP状态代码与指定代码匹配的资源。
注意:多属性间通过空格实现AND操作。
请求列表的排序
- 时间排序,默认
- 按列排序
- 按活动时间排序
- Start Time:发出的第一个请求位于顶部
- Response Time:开始下载的第一个请求位于顶部
- End Time :完成的第一个请求位于顶部
- Total Duration:连接设置时间和请求/响应时间最短的请求位于顶部
- Latency:等待最对响应时间的请求位于顶部
请求列表:
- Initiator:发起请求的对象或进程。它可能有以下几种值:
- Parser(解析器):Chrome的HTML解析器发起了请求,鼠标悬停显示JS脚本
- Redirect(重定向):HTTP重定向启动了请求
- Script(脚本):脚本启动了请求
- Other(其他):一些其他进程或动作发起请求,例如用户点击链接跳转到页面或在地址栏中输入网址。
- Size:服务器返回的响应大小(包括头部和包体),可显示解压后大小
- Time:总持续时间,从请求的开始到接收响应中的最后一个字节
- Waterfall:各请求相关活动的直观分析图。
预览请求内容:
- 查看头部
- 查看cookie
- 预览响应正文:查看图像用
- 查看响应正文
- 时间详细分布
- 导出数据为HAR格式
- 查看未压缩的资源大小:Use Large Request Rows
- 浏览器加载时间(概览、概要、请求列表) DOMContentLoaded事件颜色设置为蓝色,而load事件设置为红色
- 将请求数据复制到剪贴板
- Copy Link Address:将请求的网址复制到剪贴板
- Copy Response:将响应包体复制到剪贴板
- Copy as cURL:以cURL命令形式复制请求
- Copy All as cURL:以一系列cURL命令形式复制所有请求
- Copy All as HAR:以HAR数据形式复制所有请求
- 查看请求上下游:按住shift键悬停请求上,绿色是上游,红色是下游
浏览器加载时间
触发流程:
- 解析HTML结构
- 加载外部脚本和样式表文件
- 解析并执行脚本代码//部分脚本会阻塞页面的加载
- DOM树构建完成//DOMContentLoaded事件
- 加载图片等外部文件
- 页面加载完毕//load事件
请求时间详细分布(一)
- Queueing:浏览器在以下情况下对请求排队
- 存在更高优先级的请求
- 此源打开六个TCP连接,达到限值,仅适用于HTTP/1.0和HTTP/1.1
- 浏览器正在短暂分配磁盘缓存中的空间
- Stalled:请求可能会因Queueing中描述的任何原因而停止
- DNS LookUp:浏览器正在解析请求的IP地址
- Proxy Negotiation:浏览器正在与代理服务器协商请求。
- Request sent:正在发送请求
- ServiceWorker Preparation:浏览器正在启动Service Worker
- Request to ServiceWorker: 正在将请求发送到Service Worker
- Waiting(TTFB):浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte(至第一个字节的时间)。此时间包括1次往返延迟时间及服务器准备响应所用的时间
- Content Download :浏览器正在接收响应
- Receiving Push:浏览器正在通过HTTP/2服务器推送接收此响应的数据
- Reading Push:浏览正在读取之前收到的本地数据
3.URI的基本格式以及URL区别
当没有URI时
- 站长A欲分享一部电影Forrest Gump给B,需要告诉:
- 请使用FTP协议访问mysite.net,端口时8502
- 登录用户名是user,密码是pass
- 进入到/shared/movice 目录下
- 转换为二进制模式
- 下载名为Forrest Gump.mkv格式的文件
- 有了URI:
ftp://user:pass@mysite.net:8502/shared/movie/Forrest Gump.mkv
什么是URI 统一资源标识符
-
URL:Uniform Resource Locator,表示资源的位置,期望提供查找资源的方法
-
URN:Uniform Resource Name,期望为资源提供持久的、位置无关的标识方式,并允许简单地将多个命名空间映射到单个URN命名的空间。
-
URI:Uniform Resource Identifier,用以区分资源,是URL和URN的超集,用以取代URL和URN的概念。
-
Resource资源:可以是图片、文档、今天杭州的温度等,也可以是不能通过互联网访问的实体,例如人、公司、实体书,也可以是抽象的概念,例如亲属关系或者数字符号。一个资源可以有多个URI
-
Identifier标识符:将当前资源与其他资源区分开的的名称
-
Uniform统一:允许不同种类资源在同一上下文出现 对不同种类的资源标识符可以使用同一种语义进行解读 引入新标识符时,不会对已有标识符产生影响 允许统一资源标识符在不同 Internet规模下的上下文中出现
URI的组成
-
组成:schema,user information,host,port,path,query,fragment
URI = scheme":“hier-part[”?“query][”#" fragment]
scheme= ALPHA*(ALPHA / DIGIT / “+” / “-”/“.”)
query = *(pchar / “/” / “?”)
fragment = *(pchar / “/” / “?”)
hier-part = “//” authority path-abempty / path-absoulute / path-rootless / path-empty
authority = [userinfo “@”] host [“:” port]
userinfo = *(unreserved / pct-encoded / sub-delims /“:”)
host = IP-literal / IPv4address / reg-name
port = *DIGIT
path = path-abempty / path-absolute / path-noscheme / path-rootless / path-empty
path-abempty = *(“/” segment) 以/开头的路径或者空路径
path-absolute = “/” [segment-nz *(“/” segment)] 以/开头的路径,但不能以//开头
path-noscheme = segment-nz-nc*("/"segment) 以非:号开头的路径
path-rootless = segment-nz*("/"segment) 相对path-noscheme,增加允许:号开头的路径
path-empty = 0 空路径
4.为什么要进行URI编码
传递数据中,如果存在用作分隔符的保留字符怎么办?
对产生歧义性的数据编码:
- 不在ASCII码范围内的字符
- ASCII码中不可显示的字符
- URI中规定的保留字符
- 不安全字符(传输环节中可能会被不正确处理),如空格、引号、尖括号等
保留字符与非保留字符
保留字符
reserved = gen-delims / sub-delims
gen-delims = “:” / “/” / “?” / “#” / “[” /“]” /“@”
sub-delims = “!” / “$” / “&” /“'” /“(” /“)” /“*” /“+” /“,” /“;” /“=”
非保留字符
unreserved = ALPHA / DIGIT /“-” /“.” /“_” /“~”
ALPHA:%41-%5A and %61-%7A
DIGIT:%30-%39
-:%2D .:%2E _:%5F
~:%7E,某些实现将其认为保留字符
URI百分号编码
百分号编码的方式
- pct-encoded = “%” HEXDIG HEXDIG
- US-ASCII: 128个字符(95个可显示字符,33个不可显示字符)
- 对于HEXDIG十六进制中字母,大小写等价。
非ASCII码字符:建议先UTF8编码,再US-ASCII编码
对URI合法字符,编码与不编码是等价的
5.详解HTTP请求行
request-line = method SP request-target SP HTTP-version CRLF
method方法:指明操作目的,动词
request-target = origin-form / absoulute-form / authority-form / asterisk-form
- Origin-form = absoulute-path[“?” query] 向origin server发起的请求,path为空时必须传递 /
- Absolute-form = absolute-URI 仅用于向正向代理proxy发起请求时,详见正向代理与隧道
- Authority-form = authority 仅用于CONNECT方法,例如 CONNECT
www.example.com:80
HTTP/1.1 - Asterisk-form = “*” 仅用于OPTIONS方法
HTTP-version
- HTTP/0.9:只支持GET方法,过时
- HTTP/1.0:RFC1945,1996,常见使用与代理服务器
- HTTP/1.1:RFC2616,1999
- HTTP/2.0:2015.5正式发布
常见的方法:
- GET :主要的获取信息方法,大量的性能优化都针对该方法、幂等方法
- HEAD:类似于GET方法,但服务器不发送BODY,用于获取HEAD元数据,幂等方法
- POST:常用于提交HTML FORM表单、新增资源等
- PUT:更新资源,带条件时是幂等方法
- DELETE:删除资源,幂等方法
- CONNECT:建立tunnel隧道
- OPTIONS:显示服务器对访问资源支持的方法,幂等方法
- TRACE:回显服务器收到的请求,用于定位问题。有安全风险
用于文档管理的WEBDAV方法
- PROPFIND:从Web资源中检索以XML格式存储的属性。它也被重载,以允许一个检索远程系统的集合结构
- PROPPATCH:在单个原子性动作中更改和删除资源的多个属性
- MKCOL:创建集合或目录
- COPY:将资源从一个URI复制到另一个URI
- MOVE:将资源从一个URI移动到另一个URI
- LOCK:锁定一个资源。WebDAV支持共享锁和互斥锁
- UNLOCK:解除资源的锁定
我们可以抓个包看看,具体的如下:
可以看到WEBDAV一些方法,都在上面有展示。
6.HTTP的正确响应码
HTTP响应行
status-line = HTTP-version SP status-code SP reason-phrase CRLF
- Status-code = 3DIGIT
- Reason-phrase = *(HTAB / SP / VCHAR /obs-text)
响应码分类:1XX
- 响应码规范:RFC6585、RFC7231
- 1xx:请求已接收到,需要进一步处处理才能完成,HTTP1.0不支持
- 100 Continue:上传大文件前使用 由客户端发起请求中携带Expect:100-continue头部触发
- 101 Switch Protocols:协议升级使用,由客户端发起请求中携带Upgrade:头部触发
- 102 Processing:WebDAV请求可能包含许多涉及文件操作的子请求,需要很长时间才能完成请求。该代码表示服务器已经收到并正在处理请求,但无响应可用。这样可以防止客户端超时,并假设请求丢失。
响应码分类:2XX
- 2xx:成功处理请求
- 200 OK:成功返回响应
- 201 Created:有新资源在服务器端被成功创建
- 202 Accepted:服务器接收并开始处理请求,但请求未处理完成。这样一个模糊的概念是有意如此设计,可以覆盖更多的场景。例如异步、需要长时间处理的任务。
- 203 Non-Authoritiative Information: 当代理服务器修改了origin server的原始响应包体时,代理服务器可以通过修改200为203的方式告知客户端这一事实,方便客户端为这一行为作为相应的处理。203响应可以被缓存。
- 204 No Content:成功执行了请求且不携带响应包体,并暗示客户端无需更新当前的页面视图。
- 205 Reset Content: 成功执行了请求且不携带响应包体,同时指明客户端需要更新当前页面视图。
- 206 Partial Content: 使用range协议时返回部分响应内容时的响应码
- 207 Multi-Status: RFC4918,在WEBDAV协议中以XML返回多个资源的状态
- 208 Alrady Reported: RFC5842,为避免相同集合下资源在207响应码下重复上报,使用208可以使用父集合的响应码。
响应码分类:3XX
- 3xx:重定向使用Location指向的资源或者缓存中的资源。在RFC2068中规定客户端重定向次数不应超过5次,以防止死循环。
- 300 Multiple Choices:资源有多种表述,通过300返回给客户端后其自行选择访问哪一种表述。由于缺乏明确的细节,300很少使用。
- 301 Mobed Permanently:资源永久性的重定向到另一个URI中。
- 302 Found:资源临时的重定向到另一个URI中。
7.HTTP错误的响应码
响应码分类:4XX
- 4XX:客户端出现错误
- 400 Bad Request:服务器认为客户端出现了错误,但不能明确判断为以下哪种错误使用此错误码。例如HTTP请求格式错误。
- 401 Unauthorized:用户认证信息缺失或者不正确,导致服务器无法处理请求。
- 407 Proxy Authentication Required: 对需要经由代理的请求,认证信息未通过代理服务器的验证
- 403 Forbidden:服务器理解请求的含义,但没有权限执行此请求
- 404 Not Found:服务器没有找到对应的资源
- 410 Gone:服务器没有找到对应的资源,且明确的知道该位置永久性找不到该资源。
- 405 Method Not Allowed:服务器不支持请求行中的method方法
- 406 Not Acceptable: 对客户端指定的资源表述不存在,服务器返回表述列表供客户端选择。
- 408 Request Timeout: 服务器接收请求超时
- 409 Conflict:资源冲突,例如上传文件时目标位置已经存在版本更新的资源
- 411 Length Required: 如果请求含有包体且未携带Content-Length头部,且不属于chunk类请求时,返回411
- 412 Precondition Failed: 复用缓存时传递的If-Unmodified-Since或If-None-Match头部不被满足
- 413 Payload Too Large/Request Entity Too Large:请求的包体超出服务器处理的最大长度
- 414 URI Too Long:请求的URI超出服务器能接受的最大长度
- 415 Unsupported Media Type:上传的文件不被服务器支持
- 416 Range Not Satisfiable:无法提供Range请求中指定的那段包体
- 417 Expectation Failed:对于Expect请求头部期待的情况无法满足时的响应码
- 421 Misdirected Request: 服务器认为这个请求不该发给它,因为它没有能力处理
- 426 Upgrade Required:服务器拒绝基于当前HTTP协议提供服务,通过Upgrade头部告知客户端必须升级协议才能继续处理
- 428 Precondition Required:用户请求缺失了条件类头部,例如If-Match
- 429 Too Many Requests:客户端发送请求的速率过快
- 431 Request Header Fieds Too Large:请求的HEADER头部大小超过限制
- 451 Unavailable For Legal Reasons: RFC 7725,由于法律原因资源不可访问
响应码分类:5XX
- 5XX:服务器端出现错误
- 500 Internal Server Error:服务器内部错误,且不属于一下错误类型
- 501 Not Implemented:服务器不支持实现请求所需要的功能
- 502 Bad GateWay:代理服务器无法获取到合法响应
- 503 Service Unavailable:服务器资源尚未准备好处理当前请求
- 504 Gateway Timeout: 代理服务器无法及时的从上游获得响应
- 505 HTTP Version Not Supported:请求使用的HTTP协议版本不支持
- 507 Insufficient Storage:服务器没有足够的空间处理请求
- 508 Loop Detected: 访问资源时检测到循环
- 511 Network Authentication Required:代理服务器发现客户端需要进行身份验证才能获得网络访问权限。
8.写在最后
不支持实现请求所需要的功能
- 502 Bad GateWay:代理服务器无法获取到合法响应
- 503 Service Unavailable:服务器资源尚未准备好处理当前请求
- 504 Gateway Timeout: 代理服务器无法及时的从上游获得响应
- 505 HTTP Version Not Supported:请求使用的HTTP协议版本不支持
- 507 Insufficient Storage:服务器没有足够的空间处理请求
- 508 Loop Detected: 访问资源时检测到循环
- 511 Network Authentication Required:代理服务器发现客户端需要进行身份验证才能获得网络访问权限。
8.写在最后
这篇博客主要介绍了谷歌浏览器中如何使用Network面板分析HTTP报文,以及一些HTTP的访问的请求行,响应行,响应的状态码。