从四个维度带你读懂HTTP

超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。 请求和响应消息的头以 ASCII 形式给出；而消息内容则具有一个类似MIME的格式。超文本传输协议是一种用于分布式、协作式和超媒体信息系统的应用层协议，是万维网 WWW（World Wide Web）的数据通信的基础

HTTP 基础

HTTP 的工作流程

HTTP 工作在客户端-服务器模型之上。客户端发送一个 HTTP 请求到服务器，服务器响应该请求并返回数据。这个过程可以通过以下步骤来理解：

1. 客户端发起请求：用户通过浏览器输入 URL 或点击链接，客户端生成 HTTP 请求。
2. 请求发送到服务器：请求通过互联网发送到服务器。
3. 服务器处理请求：服务器接收请求，并根据请求的类型（如 GET、POST 等）处理。
4. 服务器返回响应：服务器处理完毕后，将请求的结果作为 HTTP 响应返回给客户端。
5. 客户端接收响应：客户端接收到响应，并展示给用户。

URL 和 URI

• URI（Uniform Resource Identifier）：是一个用于标识资源的字符串，它提供了足够的信息来访问该资源。
• URL（Uniform Resource Locator）：是 URI 的子集，它不仅唯一标识一个资源，还提供了如何定位这个资源的详细信息。

RESTful API

REST（Representational State Transfer）是一种软件架构风格，它使用 HTTP 方法定义如何通过标准方法访问和操作 Web 资源。RESTful API 设计简洁、易于使用，允许用户通过标准的 HTTP 方法获取、创建、更新和删除内容。

• 无状态：每个请求从客户端到服务器必须包含所有必要的信息，服务器不会存储会话状态。
• 统一接口：使用 HTTP 方法（GET、POST、PUT、DELETE 等）来操作资源。
• 资源导向：API 应该以资源为中心，使用 URI（统一资源标识符）来标识资源。

RESTful 风格：

• GET /books：获取图书列表。
• GET /books/{bookId}：获取特定图书的详细信息。
• POST /books：创建一本新书。
• PUT /books/{bookId}：更新特定图书的信息。
• DELETE /books/{bookId}：删除特定图书。

GraphQL

GraphQL 是一个由 Facebook 开发的查询语言，用于 API，并且是一个运行时用来处理这些查询的服务器端系统。GraphQL 则提供了高度定制化的数据请求 ,它允许客户端明确指定他们需要哪些数据，而不是固定的数据结构,减少了数据传输量。

• 类型系统：GraphQL 定义了强类型的 API，使得客户端可以准确地知道如何获取数据。
• 查询语言：客户端可以使用 GraphQL 查询语言来请求所需的数据。
• 灵活性：客户端可以请求特定的数据结构，而不是固定的数据集。

解决 HTTP 无状态方法：

HTTP 协议本身是无状态的，这意味着每个请求都是独立的，服务器不会在请求之间保存任何会话信息。然而，这种无状态特性有时会给 Web 应用程序带来不便，因为很多应用需要记住用户的状态，比如登录信息、购物车内容等。常用的解决 HTTP 无状态问题的方法：

1. Cookies：

   • Cookies 是服务器发送到客户端浏览器的小段数据，浏览器会存储这些数据，并在随后的请求中自动发送回服务器。

2. Session：

   • Session 是一种服务器端存储机制，用来存储用户的状态信息。
   • 当用户首次访问时，服务器会创建一个 Session，并生成一个唯一的 Session ID。这个 ID 通过 Cookie 发送给客户端，客户端在后续请求中携带这个 ID，服务器根据 ID 检索对应的 Session 对象。

3. Token：

   • 服务器生成一个 Token（通常是 JWT (JSON Web Token)），并将其发送给客户端，客户端在每个请求的 HTTP 头部中携带这个 Token。

4. Web Storage：

   • HTML5 引入了两种客户端存储选项：localStorage 和 sessionStorage。
   • 它们允许 Web 应用程序在用户的浏览器中存储键值对数据，分别用于长期存储和会话期间的存储。

HTTP 版本特性

HTTP/1.0

• 默认不支持长连接，导致频繁的连接建立和断开，影响性能。

HTTP1.1

特点：

• 持久连接: 允许多个请求和响应复用同一个 TCP 连接，显著提高了传输效率。

• 管道化技术：允许客户端在等待第一个响应之前连续发送多个请求。这减少了连接建立和数据传输的延迟，提升了页面加载速度。

缺点：

• 管道化技术由于队头阻塞问题导致效果有限。

HTTP/2

特点：

• 二进制协议： 相较于 HTTP/1.x 的文本协议，二进制协议能更好的进行头部数据压缩，同时它解析更快，效率更高

• 多路复用：允许在单个 TCP 连接上并行交错发送多个请求和响应。这解决了 HTTP/1.x 中的队头阻塞问题，同时多路复用可能会导致某些类型的资源竞争，影响性能。

• 服务器推送： 服务器推送允许服务器在客户端请求之前主动发送资源

HTTP/3

• 基于QUIC协议，运行在UDP之上，提供了类似 TCP 的可靠性。
• 支持 0-RTT 连接建立，减少了连接建立的延迟。
• 改进的流量控制和拥塞控制算法，提高了网络利用率。
• 继续支持多路复用，进一步优化了性能。

缺点：

• QUIC 协议的普及和支持还在早期阶段

HTTP 优化

HTTP 优化是前端性能优化的重要组成部分，我们主要从三个维度来进行来优化

• 增加 HTTP 并发
• 减少不必要的请求
• HTTP 缓存的详细案例和代码配置实例：

1. 增加 HTTP 的并发

增加 HTTP 并发可以减少页面加载时间，通过并行下载资源来提高页面加载速度。

解决方案：

1. 浏览器一般对同一个服务器的并发连接个数都是有限制的（一般是 6 个），我们可以增加资源域名
2. 使用 HTTP/2 协议，它允许在单个 TCP 连接上并行传输多个请求和响应，从而减少连接建立和关闭的开销。

启用 HTTP/2 ，HTTP2 要求 HTTPS ， 以下是 nginx 的配置伪代码：

http {
    keepalive_timeout 65;
    tcp_nopush on;
    tcp_nodelay on;

    server {
        listen 443 ssl http2;
        # 其他配置...
    }
}

2. 减少不必要的请求

减少不必要的请求可以降低服务器负担，减少数据传输量，加快页面加载速度。

解决方案

合并文件（CSS 和 JavaScript 文件）和使用雪碧/精灵图来减少请求的数量。

代码实例：

// webpack.config.js 示例
module.exports = {
  entry: {
    main: ["style1.css", "style2.css", "entry.js"], // 合并 CSS、JS
  },
  output: {
    filename: "bundle.js",
  },
};

• 图片精灵图：CSS Sprites

.icon-about {
  background-image: url("sprite.png");
  background-position: -32px 0;
}

3. HTTP 缓存

HTTP 缓存可以减少重复资源的请求，通过利用浏览器缓存或服务端缓存来存储静态资源,使用 Cache-Control 头部来控制资源的缓存策略。当http状态码返回 304时，就告诉浏览器可以继续使用上一次的文件

• Cache-Control 响应头
  • no-cache 协商缓存
  • no-store 不缓存
  • max-age xx （单位：秒，强缓存）

http {
   server {
         location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
             # add_header  Cache-Control  max-age=no-cache;
             add_header    Cache-Control  max-age=360000;
         }
   }
}

• ETag：客户端默认发送 If-Not-Match header 来跟 服务器的 ETag 来验证资源的版本。

server {
      location / {
         etag on;
         # etag off;
      }
}

• Last-Modified 和 If-Modified-Since：使用这些 header 来检查资源在上次请求后是否被修改。

HTTP 安全性(HTTPS)

HTTPS

HTTPS 通过在 HTTP 下层加入 TLS/SSL 协议，为数据传输提供了加密、完整性保护和身份验证。这确保了数据在传输过程中的安全性，保护用户信息不被窃取或篡改。

SSL/TLS

SSL（Secure Sockets Layer）和 TLS（Transport Layer Security）是两个主要的加密协议，用于在互联网上提供安全通信。TLS 是 SSL 的继承者，提供了更高级的安全特性。

安装步骤：

1. 证书申请：网站所有者从证书颁发机构（CA）申请 SSL 证书。
2. 证书安装：将证书安装在服务器上。
3. TLS 握手：客户端（如浏览器）与服务器建立连接时，进行 TLS 握手，协商加密参数。
4. 数据加密传输：使用协商的加密参数对数据进行加密，然后传输。

结语

HTTP 协议作为 Web 的核心，其发展和创新从未停止。从最初的 HTTP/0.9 到现在的 HTTP/3，HTTP 协议不断演进，以满足不断变化的网络需求。了解 HTTP 的各个方面，对于任何希望在 Web 领域发展的开发者来说都是至关重要的。

原文：https://juejin.cn/post/7384376473647742995