前言

作为一个前端，如果能够深刻理解 HTTP 通信，能够让我们在日常开发工作中快速定位问题。最近正好参加了第一节字节青训营，今天刚肝完HTTP的课程，这里做了一些笔记，希望对大家有帮助，有记录错误的地方还望大佬们指出~🧐

一、初识HTTP

首先哈，先抛出一个问题哈，说一说从输入URL到页面呈现发生了什么？

这是一个可以无限难的问题。出这个题目的目的就是为了考察你的 web 基础深入到什么程度。介于这篇文章主要是介绍HTTP的相关知识，这里就把重要的过程描述一下~

具体可参考(1.6w字)浏览器灵魂之问，请问你能接得住几个？

网络请求——> 网络响应——>构建DOM树——>样式计算——>生成布局树——>建图层树——>生成绘制列表——>生成图块和生成位图——>显示器显示内容

这是一个极简的图，其实上每一步都十分的复杂，这篇文章主要是基于HTTP协议，我们就主要就聚焦于浏览器发起请求，服务器响应请求这一网络通信部分。

1.1 什么是HTTP

• Hyper Text Transfer Protocol超文本传输协议
• 应用层协议，基于TCP协议
• 请求 响应
• 简单可扩展
• 无状态

HTTP在设计的时候它是一个Client-Server这样的协议，它是有请求和响应的。

二、协议分析

2.1 发展

我们每一个优秀的技术其实都是在不断进步的过程。HTTP也是更新迭代了多个版本~

2.2 HTTP报文结构

对于TCP而言，在传输的时候分为两个部分：TCP头和数据部分,而HTTP类似，也是header+body。

起始行

对于请求报文来说，起始行类似下面这样:

POST / HTTP/1.1
复制代码

也就是方法 + 路径 + http版本。

对于响应报文来说，起始行类似下面这样:

HTTP/1.1 403 Forbidden
复制代码

由http版本、状态码和原因三部分组成。

头部

空行

实体（数据部分）

就是具体的数据了，也就是body部分。请求报文对应请求体, 响应报文对应响应体。

Method

Safe（安全的）:不会修改服务器的数据的方法

GET HEAD OPTIONS

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

GET HEAD OPTIONS PUT DELETE

状态码

1xx:指示信息，表示请求已接收，继续处理

2xx:成功，表示请求已被成功接收、理解、接受

3xx:重定向，要完成请求必须进行更进一步的操作

4xx:客户端错误，请求有语法错误或请求无法实现

5xx:服务端错误，服务端未能实现合法的请求。

常见状态码：

• 200 OK —客户端请求成功
• 301 永久重定向
• 302 临时重定向
• 401 请求未经授权
• 404 请求资源不存在，可能是输入了错误的URL
• 500 服务器内部发生了不可预期的错误
• 504 Gateway Timeut-网关或者代理的服务器无法在规定的时间内获得想要的响应。

RESTful API

• 早已推广使用
• 传统API设计：把每个url当做一个功能
• Restful API设计：把每个url当做一个唯一的资源 RESTful API 是一种API设计风格
  

1. 每一个URI代表一种资源；
2. 客户端和服务器之间，传递这种资源的某种表现层；
3. 客户端通过HTTP method，对于服务器端资源进行操作，实现“表现层状态转化”

尽量不用url参数,用method表示操作类型。

常见请求头

常见响应头

缓存

cookie

Set-Cookie -response

2.3 HTTP/2概述：

更快、更稳定、更简单 帧（frame）:HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。

消息：与逻辑请求或响应消息对应的完整的一系列帧。

数据流：已建立的连接内的双向字节流，可以承载一条或多条信息。

交错发送，接收方重组织

HTTP/2连接都是永久的，而且仅需要每个来源一个连接

流控制：阻止发送方向接收方发送大量数据的机制

服务器推送

2.4HTTPS概述

HTTPS是经过TSL/SSL加密

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

三、场景分析

3.1 静态资源

我们打开Chrome调试工具，选择到NetWork选项，尝试访问掘金官网,我们一起来研究一下静态资源请求的详细内容。这里我们研究的静态资源请求是index.css

我们可以发现这个状态码是200，从硬件缓存中读取，因此有时状态码为200，不一定会发起一个真实的请求。

我们来看一下响应头：

cache-control这个指定了过期时间，与强缓存相关。

last-modified指定了最后修改时间，与协商缓存相关。

access-control-allow-origin允许哪些origin能访问我们，与同源策略有关。

content-type指定了实体数据的类型

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

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

文件名hash的作用是根据文件内容生成hash值，这样，文件内容变化的时候，请求文件名就不一样，就不会用到缓存，以获取到最新文件内容。

3.2 登录

我们退出掘金官网，然后尝试登录，捕捉登录请求，请求如下：

General：

Response Headers：

Request Headers：

1. 向什么地址做了什么动作？

• 使用POST方法
• 目标域名 juejin.cn
• 目标path/passport/web/sms_login/?account_sdk_source=web

2. 携带了哪些信息，返回了哪些信息

1. 携带信息

• Post body，数据格式为form
• 希望获取的数据格式为json
• 已有的cookie

2. 返回信息

• 数据格式json
• 种cookie的信息

鉴权

3.3 视频播放

视频直播协议

3.4 文件上传

主流方案：

为什么文件上传时有很多的options的请求?

因为触发了跨域的场景。作用是问服务端是否允许跨域。

跨域解决方案

• CORS
• 代理服务器

• 同源策略是浏览器的安全策略，不是HTTP的

• iframe

• 诸多不便

四、实战

AJAX之XHR

AJAX之Fetch

标准库：HTTP/HTTPS

• 默认模块，无需安装其他依赖
• 功能有限/不是十分友好

常用的请求库：axios

• 支持浏览器、node.js环境
• 丰富的拦截器

用户体验

我们在生产环境中，其实还关心用户的体验，我们希望用户有更优秀的体验效果，那么用户体验去优化它，一方面是大家知道的性能优化，还有一点是在网络上做一些优化，比如用HTTP2，它的传输效率而是更高的，使用CDN，传输获取的数据是更快的等等。

网络优化：

稳定性：

五、扩展

5.1 通信方式

WebSocket

• 浏览器与服务器进行全双工通讯的网络技术
• 典型场景：实时性高，例如聊天室
• URL使用ws://或wss://等开头

QUIC：Quic UDP Internet Connection

虽然基于UDP，但是可以实现类似于TCP的可靠传输及加密传输。

QUIC也是HTTP3版本的协议之一，也就是说HTTP3将会是基于UDP的！

最后

⚽好啦，关于HTTP的基础知识就介绍完啦，本篇只是起到一个抛砖引玉的效果，对HTTP感兴趣的同学可以再深入研究一下~

⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘