【第二届字节青训营 - 寒假前端场】HTTP协议指南の学习笔记

HTTP协议指南

初步了解HTTP

从输入url到页面展示的简略流程图如下：

Web包含了HTML、CSS、JavaScript、Web APIs等应用。HTTP:简单可扩展；无状态协议。无状态服务器是指一种把每个请求作为与之前任何请求都无关的独立的事务的服务器。无状态的设计简化了服务器端的设计，不必动态分配存储空间以处理进行中的会话。如果客户端在事务处理中间被中断了，系统不必为清理服务器状态而作出响应。HTTP在网络体系中所处的位置如下所示：

协议分析

协议的发展过程：

TCP连接复用技术：通过将前端多个客户的HTTP请求复用到后端与服务器建立的一个TCP连接上。这种技术能够大大减小服务器的性能负载，减少与服务器之间新建TCP连接所带来的延时，并最大限度的降低客户端对后端服务器的并发连接数请求，减少服务器的资源占用。

HTTP/1.1的举例：

请求首行：方法 地址 版本

响应首行：版本 状态码 原因短语

常见的方法：

安全的方法：GET HEAD OPTIONS（不会修改服务器的方法）

幂等方法：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的所有safe的方法都是幂等的。

常见的状态码：

• ·200 OK-客户端请求成功
• ·301-资源（网页等）被永久转移到其它URL
• ·302-临时跳转
• ·401Unauthorized-请求未经授权
• ·404-请求资源不存在，可能是输入了错误的URL
• ·500-服务器内部发生了不可预期的错误，具体错误不明确
• ·504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应。

RESTful API

RESTful API：一种API设计风格。
遵循的点：
（1）每一个URI代表一种资源；
（2）客户端和服务器之间，传递这种资源的某种表现层；
（3）客户端通过HTTP method，对服务器端资源进行操作，实现“表现层状态转化”。

常用的请求头

常见的响应头

缓存

强缓存:

• Expires，时间戳
• Cache-Control
  • 可缓存性
    • public
    • private
    • ·no-cache：协商缓存验证
    • ·no-store：不使用任何缓存
  • 到期
    • ·max-age：单位是秒，存储的最大周期，相对于请求的时间
  • 重新验证*重新加载
    • ·must-revalidate：一旦资源过期，在成功向原始服务器验证之前，不能使用

协商缓存

• ·Etag/If-None-Match：资源的特定版本的标识符，类似于指纹
• ·Last-Modified/If-Modified-Since：最后修改时间

强缓存与协商缓存运作流程图如下：

Set-Cookie-response

HTTP/2

专有名词：

• 帧（frame）：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
• 消息：与逻辑请求或响应消息对应的完整的一系列帧。
• 数据流：已建立的连接内的双向字节流，可以承载一条或多条消息。
• 交错发送：不需要按照逻辑顺序发送，接收方需要重新组织帧。
• HTTP/2连接都是永久的，而且仅需要每个来源一个连接
• 流控制：阻止发送方向接收方发送大量数据的机制，将资源分配给优先级更高的程序。
• 服务器推送：智能分析客户端的需求，主动推送信息给接收端。

HTTPS

加密的方法：
对称加密：加密和解密都是使用同一个密钥；
非对称加密，加密和解密需要使用两个不同的密钥：公钥（public key）
和私钥（private key）

实际应用的时候，采取对称加密与非对称加密：

场景分析

今日头条登录

登录界面：

手机验证码登录后：

请求从本地缓存取得

• access-control-allow-origin:* 允许所有域名访问
• content-type:text/css; charset=utf-8 资源类型为CSS
• cache-control:max-age=31536000 有效期为一年的时间

对 Chrome DevTools Header的逐行解释：

转自：【浏览器】HTTP请求头格式和响应格式 - vickylinj - 博客园 (cnblogs.com)

静态资源部署

静态资源方案：缓存+CDN+文件名hash

CDN（Content Delivery Network）是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

文件名hash的作用：当文件内容有变化时文件名变换/加上版本号，这样缓存中的文件就无法match，就只能重新请求了，保证每次访问最新的资源。

options请求：
跨域请求：

• different domains（host不同）
• different subdomains
• different schemes（协议不同）
• different ports
  同域请求：
• implicit port number（端口号不同）

跨域请求解决方案：

1.预请求：获知服务端是否允许该跨源请求（复杂请求）

2.代理服务器：同源策略是浏览器的安全策略，不是HTTP的。代理服务器运转如下：

3.iframe：限制多，不方便

下图为向目标地址，使用post方法提交信息

。

上图中：

content-type:application/x-www-form-urlencoded 表明信息为form格式

accept:application/json, text/javascript 表明接受json数据

content-type:application/json 为json类型与请求头对应

set-cookie:n_mh=6VXagNDGr5oWLY33840TRQhM9CQhyaUzqBG19GCTnMU; Path=/; Domain=toutiao.com; Max-Age=10368000; HttpOnly

set-cookie的内容包括:键值对；path根路径；根域名；有效期；HttpOnly用于加强安全性。

鉴权方案

刷新还可以记住登录信息：

Session+cookie方案：

JWT方案：

通过单点登录后，头条网站点击创作跳转后的网站自动登录。单点登录就是在多个系统中，用户只需一次登录，各个系统即可感知该用户已经登录。
单点登录方案图解：

实际应用

1.网络优化：

2.预解析与预连接：

在当前作用域中，JavaScript代码执行之前，浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义。在预解析时，变量只会声明，而函数既会声明也会定义。

<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

3.稳定性：

重试是保证稳定的有效手段，但要防止加剧恶劣情况。
缓存合理使用，作为最后一道防线。

更多

WebSocket

浏览器与服务器进行全双工通讯的网络技术。HTTP 协议做不到服务器主动向客户端推送信息。与之相对，WebSocket的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
典型场景：实时性要求高，例如聊天室URL 使用ws://或wss://等开头

QUIC:Quick UDP Internet Connection

• ·0-RTT建联（首次建联除外）。
• ·类似TCP的可靠传输。
• ·类似TLS的加密传输，支持完美前向安全。
• ·用户空间的拥塞控制，最新的BBR算法。
• ·支持h2的基于流的多路复用，但没有TCP的HOL问题。
• ·前向纠错FEC。
• ·类似MPTCP的Connection migration。