HTTP

表格比较 GET POST

HTTP 缓存有哪几种？

强缓存 V.S 协商缓存

• 是否需要 向服务器 验证本地缓存 是否有效
  • 强缓存 直接使用 本地缓存
  • 协商缓存则需 与服务器进行协商 后，确定是否使用本地缓存

什么是幂等性？

• 在相同条件下，一次请求 和 重复多次 请求 对资源的影响 是 一致的，则该操作 幂等

GET 和 POST的区别

区别有：（语义、缓存、编码、传参、幂等性）

• 从 语义 角度：GET 用于获取资源，POST 用于上传资源
• 从 缓存 角度：GET 请求会被浏览器 主动缓存，POST 不会；
• 从 编码 角度：GET 必须对 URL 进行编码，POST 无限制；
• 从 参数 角度：GET 参数直接暴露 在 URL 中，仅接受 ASCII 字符；POST 放在 请求体 中，且参数无限制，配合加密技术，更适合传输敏感信息；
• 从 幂等性 角度：GET 是幂等的，POST 不是；

HTTP协议

网页内容的传输协议又叫做超文本传输协议（Hyper Text Transfer Protocol），简称HTTP协议

HTTP协议的交互模型

HTTP协议采用了 请求/响应 的交互模型

HTTP请求消息由

请求行（request line或start-line）

请求头部（request headers）

空行

请求体（request body）

请求行由

请求方式

URL

HTTP协议版本

请求头部

用来描述 客户端基本信息，负责将客户端相关信息告知服务器

缓存（强缓存：仅中文语境）

HTTP/1.0

• expires 过期日期（时间点)
  • 是设置过期时间（绝对时间）expires: Wed,22 July 2022 02:30:00 GMT来判断缓存是否失效
  • bug1 用户时间错乱：本地时间 和 网络时间 不一致
• 资源特征值：Last-Modified字段，值为绝对时间Last-Modified: Wed,22 July 2022 01:00:00 GMT
  • 服务器发送给客户端 用来标明文件的特征值
  • 过期后，再次发送相同请求时，会赋给If-Modified-Since 通过对比 浏览器和服务器资源的文件特征值（最后修改时间），进行内容协商
  • bug2 精度不够 （精确到秒）比如：一个文件1秒内修改n次，则不能区分文件
• 都由后端设置

HTTP/1.1

• cache-control : max-age=600 过期时间（时间段 相对时间）
  • 响应头Cache-Control 在一个文件的响应头里写上Cache-Control:max-age=3600字段，此文件会 自动缓存 3600秒
  • 自动缓存指，在这段时间内，再次访问相同的URL（路径和查询参数等），那么浏览器直接不发送请求，而使用本地缓存disk cache
  • 无请求
  • 设置过期时长（相对时间），跟本地时间无关，解决了 Expires 用户时间错乱的问题

• 资源特征值：etag MD5
  • 服务器发送给客户端 用来标明文件的特征值
  • 过期后，再次发送相同请求时，会赋给If-None-Match 通过对比 浏览器和服务器资源的文件特征值（MD5 hash），进行内容协商
  • 有请求
  • 解决了HTTP/1.0 中 特征值Last-Modified精度不够的问题

• 都由后端设置

常见的请求头字段说明

简述 GET 和 POST的区别2

区别一：幂等性

• 由于GET是读 POST是写/提交
  • 幂等：所以GET幂等 POST不幂等，如果请求很多遍，不改变结果（数据库中的数据），就是幂等，相反则不幂等
  • 刷新/回退：所以GET打开的页面刷新/回退是无害的，POST打开的页面刷新/回退，需要确认，是否重新提交
  • 缓存：所以GET结果会被被浏览器 主动缓存，POST结果不会被缓存，需要设置
  • 书签/收藏栏：所以GET打开的页面，可被书签收藏，POST不会
  • 用户操作：所以用浏览器打开网页，会发送GET请求，用form标签/AJAX 发送POST请求
• 比如 打钱

区别二：请求参数

• 请求参数：通常：GET请求参数 放在URL里，POST请求数据 放在 body消息体中 （反过来也不报错 服务器自动忽略）
• 安全：GET比POST更不安全，因为参数直接暴露在URL中，不能传递敏感消息（不使用HTTPS的都是明文传数据，即使在body中，任何请求方式都是不安全的）
• 长度限制：
  • GET请求参数放在URL里有长度限制
  • HTTP协议对POST 在请求体中没有长度限制
    • 但服务器的实现 是有长度限制的 可配置最大限制
  • 无论URL，还是请求体中数据的长度限制 ，都受限于 浏览器的实现和服务器配置
  • 超过这个限制，则可能被自动截断（若是form提交则提交按钮不起作用）
  • HTTP 请求头超过限制，服务器会返回错误状态码 414（Request-URI Too Large）请求的 URI 过长 超过了服务器的范围
  • HTTP 请求的消息实体大小进行了限制， 超过该值，则会服务器会返回错误状态码 413（Request Entity Too Large）
• GET请求需要进行url编码，只接受ASCII字符，而POST支持多种编码方式
• 历史记录：由于GET是读 POST是写/提交，所以GET请求参数，会被完整保留在浏览器历史记录里，而POST中的参数不会被保留

区别三：TCP packet

• GET产生一个TCP数据包（没有body） POST产生两个或以上TCP数据包（既有Head又有Body）

根据 RFC系列技术文档 GET 和 POST最大区别是 语义

• GET获取数据、POST提交数据
• 但一般问的是实践上的区别，需要了解两者常见的实现方法

其他

• jsonp跨域请求只能通过get请求实现

HTTP响应消息

响应消息就是 服务器响应给客户端的消息内容 ，也叫作响应报文，或者应答报文

DNS解析

DNS的域名查找，在客户端和浏览器，本地DNS之间的查询方式是 递归查询；在 本地DNS服务器* 与根域及其子域之间的查询方式是 迭代查询

用户输入 与 浏览器合成URL

• 用户输入URL，浏览器首先判断用户输入的是 合法的URL 还是 搜索内容
• 如果是 搜索内容，就将搜索内容 + 默认搜索引擎，合成新的URL，再加载
• 如果 内容符合URL规则，浏览器就会根据URL协议，在这段内容上 协议，合成合法的URL，如果是合法的URL就开始进行加载

状态行是由

HTTP协议版本

状态码

状态码描述

页面渲染

1. 渲染进程将开始 页面解析，并加载子资源，比如图片
2. 构建DOM树 ：HTML经过解析后输出的是一个以 document 为顶层节点的树状结构的DOM
3. 样式计算 （构建CSS树） ：将从link标签引入的外部样式，style标签里的样式 和 元素身上的样式转换成浏览器能够理解的 样式表，然后将样式表中的属性值进行标准化，例如 color:red 转换为 rgb 形式，然后根据CSS的继承和层叠规则计算出DOM树种每个节点的具体样式
4. 合成布局阶段(将DOM树 与 CSS树 合成布局树) ：会生成一棵只包含可见元素的布局树，然后根据布局树的每个节点，计算出其具体位置和大小
5. 分层：对页面种的复杂效果，例如3D转换，页面滚动或者z轴排序等生成图层树
6. 绘制：为每个图层生成绘制列表，并将其提交到合成线程中
7. 光栅化：优先选择可视窗口内的图块来生成位图数据
8. 显示：所有图块都被光栅化之后，开始显示页面

提交文档

• 渲染进程准备好之后，浏览器会发出提交文档的消息给渲染进程
  • 渲染进程收到消息后，会和网络进程建立数据传输的管道
  • 文档数据传输完成后，渲染进程会返回确认提交的消息给浏览器进程
• 浏览器收到确认提交的消息后，会更新浏览器的页面状态
  • 包括了安全状态，地址栏的URL，前进后退的历史状态，并更新web页面为空白

HTTP响应消息-响应头部

响应头部用来描述 服务器的基本信息

• 响应头部由多行 键/值对 组成
• 每行的键和值之间用英文的冒号分隔

准备渲染进程

• 网络进程将获取的数据进行解析
  • 根据响应头中的Content-type来判断响应数据的类型
    • 如果是字节流类型，就将该请求交给下载管理器去下载
    • 如果是text/html类型，就通知浏览器进程获取到的是HTML，准备渲染进程
• 一般情况下浏览器的一个tab页面对应一个渲染进程
  • 如果从当前页面打开的新页面并且属于同一站点，这种情况会复用渲染进程
  • 其他情况则需要创建新的渲染进程

• 构建请求行：浏览器进程首先会构建 请求行信息，后通过进程间通信IPC将URL请求发送给 网络进程
• 查找缓存：网络进程获取到URL后，会先去 本地缓存 中查找是否有缓存资源
  • 如果有则直接将缓存资源返回给浏览器进程
  • 否则进入 网络请求阶段
• DNS解析：网络进程请求首先会从 DNS数据缓存 服务器中查找是否缓存过当前域名的信息
  • 有则直接返回，否则，会进行 DNS解析域名 对应的IP和端口号
• 等待TCP队列：chrome机制，同一个域名同时最多只能建立 6个 TCP连接
  • 如果超过这个数量的连接必须要进入 排队等待状态
• 建立TCP连接：通过TCP三次握手与服务器建立连接，然后进行数据传输
• 发起HTTP请求：浏览器首先会向服务器发送请求行
  • 请求行中包含了 请求方法、请求URI和HTTP版本，还会发送请求头
  • 告诉服务器一些浏览器的相关信息，比如浏览器内核、请求域名、Cookie等信息
• 服务器处理请求：服务器首先返回响应行，包括 协议版本和状态码
  • 在返回响应头中，包含返回的数据类型，服务器要在客户端保存的Cookie等
• 断开TCP连接：数据传输完成后，通过四次挥手来断开连接

常见的响应头字段

• 关于更多响应头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers

满分回答之从输入URL到页面显示经历了什么

• 用户输入 -> 合成URL -> DNS域名解析
• 建立TCP连接 -> 发起 HTTP 请求 (服务器处理请求，返回相应结果)
• 关闭TCP连接
• 准备渲染进程
• 提交文档
• 页面渲染

Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session

• Cookie 是服务器发送给客户端的 一段字符串
  • Cookie存储在 客户端 中
  • 客户端（浏览器）每次访问服务器（发送请求）时，
    • 都自动将所有 同域的、 未过期的 Cookie 带上，即请求携带 Cookie 字段
  • 大小 4k 左右
  • 用来存储用户信息，比如 Session-id
  • Cookie是浏览器的自动行为，前端不操作Cookie，或者说前端操作document.cookie是不安全的
• Session 会话，表示服务器与浏览器的一段时间内的会话
  • Session在 服务器 的文件里
  • Session 基于 Cookie 来实现，将Session-id放到Cookie字段中，响应给浏览器
• Storage 对象
  • LocalStorage和SessionStorage是其不同实现
  • LocalStorage 不会 自动过期，除非主动清空
  • SessionStorage 在 会话结束 时过期（如关闭浏览器）
  • 大小 5-10M (各浏览器不同)
  • 用来存储用户非敏感数据
  • 不会发送给 服务器
  • 前端使用 Storage 在 客户端 上存储数据
• 主要区别是 Cookie 会被发送到服务器，而 Storage 不会

记忆题：HTTP/1.1与HTTP/2的区别？

• 二进制 格式
• 头部 压缩
• 多路 复用
• 服务器 推送
• 默认开启 HTTPS

内容协商

• 如果缓存过期，浏览器判断文件是否还能继续使用，需要询问服务器，和服务器进行 内容协商
• HTTP/1.0 缓存过期后
  • 再次访问相同的URL
  • 浏览器发送请求，自动带上 If-Modified-Since 字段
  • 值和上次响应的资源特征值 Last-Modified 一致
  • 来标明文件 询问服务器，文件是否发生变更
• HTTP/1.1 缓存过期后
  • 再次访问相同的URL
  • 浏览器发送请求，自动带上 If-None-Match 字段
  • 值和上次响应的资源特征值 ETag 一致
  • 来标明文件 询问服务器，文件是否发生变更
• 如果服务器返回304 not modified 说明内容命中，文件未变更，仍可继续使用
• 如果服务器返回200，并在body中返回最新内容，说明内容未命中，文件已变更，直接删除原内容

可能还会提到Pragma，但 MDN 已经明确不推荐使用（兼容旧版本协议客户端）

• MDN Pragma 语义不明

一些额外注意

• 首页一般不缓存
• 缓存为后端（Nginx或后端服务器，接口层或代码层）设置，浏览器自动处理
• 同时使用HTTP/1.1和HTTP/1.0，设置过期结果成一样，差别不大即可
• 后端通过变更文件 URL 来强制不使用缓存，比如给资源加上不同hash值
• 发送no-cache请求，取消缓存

参考

• HTTP缓存控制小结

HTTP响应消息-空行

在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端 响应头部至此结束

HTTP响应消息-响应体

响应体中存放的，是服务器响应给客户端的资源内容

HTTP 请求方法，属于 HTTP 协议中的一部分

常用的HTTP的请求方法

GET

查询 用来 获取服务器上的资源，请求体中不包含请求数据，请求数据放在 请求头中

不常用的HTTP的请求方法

HEAD

请求一个与 GET 请求的响应头部相同的响应，无需响应体

HTTP响应状态码

HTTP 响应状态码（HTTP Status Code），也属于 HTTP 协议的一部分，用来标识响应的状态

• 响应状态码会随着响应消息一起被发送至客户端浏览器
• 通过浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了

2** 范围的状态码，表示服务器已成功接收到请求并进行处理

3** 范围的状态码，表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求

4** 范围的状态码，表示客户端的请求有非法，即不合语法的内容，从而导致请求失败

5** 范围的状态码，表示服务器未能正常处理客户端的请求，而出现意外错误

可以一同记忆的状态码

206

Partial Content

表示 部分内容。

成功状态响应代码表示请求已成功，并且主体包含所请求的 数据区间，该数据区间是在请求的 Range 首部指定的