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键悬停请求上，绿色是上游，红色是下游

浏览器加载时间

触发流程：

1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码//部分脚本会阻塞页面的加载
4. DOM树构建完成//DOMContentLoaded事件
5. 加载图片等外部文件
6. 页面加载完毕//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:[email protected]: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的访问的请求行，响应行，响应的状态码。