浏览器发起http请求

ABNF语法规则定义http消息格式

https://www.rfc-editor.org/rfc/rfc5234

ABNF (扩充巴科斯-瑙尔范式)操作符

  • 空白字符:用来分隔定义中的各个元素
    • method SP request-target SP HTTP-version CRLF
  • 选择 /:表示多个规则都是可供选择的规则
    • start-line = request-line / status-line
  • 不定量重复 m*n:
    • * 元素表示零个或更多元素: *( header-field CRLF )
    • 1* 元素表示一个或更多元素,2*4 元素表示两个至四个元素
  • 序列组合 ():将规则组合起来,视为单个元素
  • 可选序列 []

HTTP-message ABNF描述

HTTP-message = start-line *( header-field CRLF ) CRLF [ message-body ]

  • start-line = request-line / status-line
    • request-line = method SP request-target SP HTTP-version CRLF (请求行)
    • status-line = HTTP-version SP status-code SP reason-phrase CRLF (响应行)
  • header-field = field-name “:” OWS field-value OWS
    • OWS = *( SP空格 / HTAB横向制表符 )
    • field-name = token
    • field-value = *( field-content / obs-fold )
  • message-body = *OCTET

wireshark分析一个请求

OSI 模型与 TCP/IP 模型对照

报文头部

Chrome 抓包:快速定位 HTTP 协议问题

Network 面板

  • 控制器:控制面板的外观与功能
  • 过滤器:过滤请求列表中显示的资源
    • 按住 Command (Mac)或 Ctrl (Window / Linux),然后点击过滤器可以 同时选择多个过滤器
  • 概览:显示 HTTP 请求、响应的时间轴
  • 请求列表:默认时间排序,可选择显示列
  • 概要:请求总数、总数据量、总花费时间等

控制器

过滤器

  • XHR、JS、CSS、Img、Media、Font、Doc、WS (WebSocket)、Manifest 或 Other (此处未列出的任何其他类型)
  • 多类型,按住 Command (Mac) 或 Ctrl(Windows、Linux)
  • 按时间过滤:概览面板,拖动滚动条
  • 隐藏 Data URLs:CSS 图片等小文件以 BASE64 格式嵌入 HTML 中,以减少 HTTP 请求数

属性过滤(一)

  • domain:仅显示来自指定域的资源。 您可以使用通配符字符 (*) 纳入多个域
  • has-response-header:显示包含指定 HTTP 响应标头的资源
  • is:使用 is:running 可以查找 WebSocket 资源,is:from-cache 可查找缓存读出的资源
  • larger-than: 显示大于指定大小的资源(以字节为单位)。 将值设为 1000 等同于设置为 1k
  • method:显示通过指定 HTTP 方法类型检索的资源 • mime-type:显示指定 MIME 类型的资源

多属性间通过空格实现 AND 操作

属性过滤(二)

  • 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 状态代码与指定代码匹配的资源。

请求列表

  • 时间排序,默认
  • 按列排序
  • 按活动时间排序
  • 请求列表字段可以自己增加、删减 (右击请求列表栏,进行勾选即可)

相关字段

  • Name : 资源的名称
  • Status : HTTP 状态代码
  • Type : 请求的资源的 MIME 类型
  • Initiator : 发起请求的对象或进程。它可能有以下几种值
    • Parser (解析器) : Chrome的 HTML 解析器发起了请求 • 鼠标悬停显示 JS 脚本
    • Redirect (重定向) : HTTP 重定向启动了请求
    • Script (脚本) : 脚本启动了请求
    • Other (其他) : 一些其他进程或动作发起请求,例如用户点击链接跳转到 页面或在地址栏中输入网址
  • Size : 服务器返回的响应大小(包括头部和包体),可显示解压后大小
  • Time : 总持续时间,从请求的开始到接收响应中的最后一个字节
  • Waterfall:各请求相关活动的直观分析图
  • 添加自定义列

预览请求内容

点击请求看请求头,响应内容等

右击可以copy 这个请求等url,curl ,响应内容等信息

浏览器加载时间

  • 解析 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 服务器推送接收此响应的数据

URL,URN,URI

  • URL: RFC1738 (1994.12),Uniform Resource Locator,表示资源的位置, 期望提供查找资源的方法
  • URN:RFC2141 (1997.5),Uniform Resource Name,期望为资源提供持久 的、位置无关的标识方式,并允许简单地将多个命名空间映射到单个URN命名 空间
    • 例如磁力链接 magnet:?xt=urn:sha1:YNCKHTQC5C
  • URI:RFC1630 (1994.6)、RFC3986 (2005.1,取代 RFC2396 和 RFC2732 ),Uniform Resource Identifier,用以区分资源,是 URL 和 URN 的超集,用以取代 URL 和 URN 概念
    • 统一资源标识符

URI 的组成

组成:schema, user information, host, port, path, query, fragment

为什么要进行 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 (16进制)
      • US-ASCII:128 个字符(95 个可显示字符,33 个不可显示字符)
      • 参见:https://zh.wikipedia.org/wiki/ASCII
      • 对于 HEXDIG 十六进制中的字母,大小写等价
  • 非 ASCII 码字符(例如中文):建议先 UTF8 编码,再 US-ASCII 编码
  • 对 URI 合法字符,编码与不编码是等价的
    • URI 转换”既可以“URI%e8%bd%ac%e6%8d%a2 也可以"%55%52%49%e8%bd%ac%e6%8d%a2"

请求行

request-line = method SP request-target SP HTTP-version CRLF

  • method 方法:指明操作目的,动词

  • request-target = origin-form / absolute-form / authority-form / asterisk-form

    • origin-form = absolute-path [ “?” query ]
      • 向 origin server 发起的请求,path 为空时必须传递 /
    • absolute-form = absolute-URI
      • 仅用于向正向代理 proxy 发起请求时,详见正向代理与隧道
    • authority-form = authority
    • asterisk-form = “*“
      • 仅用于 OPTIONS 方法
  • HTTP-version 版本号

    • HTTP/0.9:只支持 GET 方法,过时
    • HTTP/ 1.0:RFC1945,1996, 常见使用于代理服务器(例如 Nginx 默认配置)
    • HTTP/ 1.1:RFC2616,1999
    • HTTP/ 2.0:2015.5 正式发布

常见方法

  • GET:主要的获取信息方法,大量的性能优化都针对该方法,幂等方法
  • HEAD:类似 GET 方法,但服务器不发送 BODY,用以获取 HEAD 元数据,幂等方法
  • POST:常用于提交 HTML FORM 表单、新增资源等
  • PUT:更新资源,带条件时是幂等方法
  • DELETE:删除资源,幂等方法
  • CONNECT:建立 tunnel 隧道
  • OPTIONS:显示服务器对访问资源支持的方法,幂等方法
  • TRACE:回显服务器收到的请求,用于定位问题。有安全风险
    • Changes with nginx 0.5.17 02 Apr 2007 *) Change: now nginx always returns the 405 status for the TRACE method.
1curl static.taohui.tech -X OPTIONS -I  # -I 只要响应头

http响应行

status-line = HTTP-version SP status-code SP reason-phrase CRLF

  • status-code = 3DIGIT
  • reason-phrase = *( HTAB / SP / VCHAR / obs-text )

响应码分类

1xx

1xx:请求已接收到,需要进一步处理才能完成,HTTP1.0 不支持

  • 100 Continue:上传大文件前使用
    • 由客户端发起请求中携带 Expect: 100-continue 头部触发
  • 101 Switch Protocols:协议升级使用
    • 由客户端发起请求中携带 Upgrade: 头部触发,如升级 websocket 或者 http/2.0
  • 102 Processing:WebDAV 请求可能包含许多涉及文件操作的子请求,需要很长时间 才能完成请求。该代码表示服务器已经收到并正在处理请求,但无响应可用。这样可 以防止客户端超时,并假设请求丢失

2xx

2xx:成功处理请求

  • 200 OK: 成功返回响应。
  • 201 Created: 有新资源在服务器端被成功创建。
  • 202 Accepted: 服务器接收并开始处理请求,但请求未处理完成。这样一个模 糊的概念是有意如此设计,可以覆盖更多的场景。例如异步、需要长时间处理 的任务。
  • 203 Non-Authoritative Information:当代理服务器修改了 origin server 的 原始响应包体时(例如更换了HTML中的元素值),代理服务器可以通过修改 200为203的方式告知客户端这一事实,方便客户端为这一行为作出相应的处理。 203响应可以被缓存。
  • 204 No Content:成功执行了请求且不携带响应包体,并暗示客户端无需 更新当前的页面视图。
  • 205 Reset Content:成功执行了请求且不携带响应包体,同时指明客户端 需要更新当前页面视图。
  • 206 Partial Content:使用 range 协议时返回部分响应内容时的响应码
  • 207 Multi-Status:RFC4918 ,在 WEBDAV 协议中以 XML 返回多个资源 的状态。
  • 208 Already Reported:RFC5842 ,为避免相同集合下资源在207响应码 下重复上报,使用 208 可以使用父集合的响应码。

3xx

3xx:重定向使用 Location 指向的资源或者缓存中的资源。在 RFC2068 中规定客户端重定向次数不应超过 5 次,以防止死循环

  • 300 Multiple Choices:资源有多种表述,通过 300 返回给客户端后由其 自行选择访问哪一种表述。由于缺乏明确的细节,300 很少使用。
  • 301 Moved Permanently:资源永久性的重定向到另一个 URI 中。
  • 302 Found:资源临时的重定向到另一个 URI 中
  • 303 See Other:重定向到其他资源,常用于 POST/PUT 等方法的响应中。
  • 304 Not Modified:当客户端拥有可能过期的缓存时,会携带缓存的标识 etag、时间等信息询问服务器缓存是否仍可复用,而304是告诉客户端可以 复用缓存。
  • 307 Temporary Redirect:类似302,但明确重定向后请求方法必须与原 请求方法相同,不得改变。
  • 308 Permanent Redirect:类似301,但明确重定向后请求方法必须与原请 求方法相同,不得改变。

如:https://tools.ietf.org/html/rfc7231?test=1#page-7