初识 HTTP 协议青训营打卡day11 | 包MarsCode AI刷题初识HTTP协议从用户输入URL到按下en

初识HTTP协议

从用户输入URL到按下enter键，这期间发生了什么？

从用户在浏览器地址栏输入 URL 并按下 Enter 键，到最终看到网页内容，这期间发生了一系列复杂的步骤。详细分解：

1. 用户输入 URL

用户在浏览器的地址栏中输入一个 URL（例如 https://www.example.com）并按下 Enter 键。

2. 浏览器解析 URL

浏览器解析输入的 URL，提取出协议（如 HTTP 或 HTTPS）、主机名（如 www.example.com）和路径（如 /path/to/resource）。

3. DNS 查询

浏览器需要将主机名（如 www.example.com）转换为 IP 地址。这通过 DNS（域名系统）查询完成：

本地缓存：首先检查本地 DNS 缓存，看看是否有最近的 DNS 记录。
操作系统缓存：如果没有在本地缓存中找到，浏览器会查询操作系统的 DNS 缓存。
ISP DNS 服务器：如果仍然没有找到，浏览器会发送 DNS 请求到用户的 ISP（互联网服务提供商）的 DNS 服务器。
递归查询：ISP 的 DNS 服务器会继续递归查询，直到找到目标域名的 IP 地址。

4. 建立 TCP 连接

一旦获得目标服务器的 IP 地址，浏览器会发起一个 TCP 连接请求：

三次握手：TCP 协议通过三次握手建立连接。
1. SYN：客户端发送一个 SYN（同步）包到服务器。
2. SYN-ACK：服务器回应一个 SYN-ACK（同步确认）包。
3. ACK：客户端发送一个 ACK（确认）包到服务器，连接建立成功。

5. 发送 HTTP/HTTPS 请求

连接建立后，浏览器发送一个 HTTP 或 HTTPS 请求到服务器：

HTTP 请求：包括请求行（如 GET /path/to/resource HTTP/1.1）、请求头（如 Host: www.example.com）和请求体（如果有）。
HTTPS 请求：在发送 HTTP 请求之前，需要进行 SSL/TLS 握手以建立安全连接。

6. 服务器处理请求

服务器接收到请求后，根据请求的内容进行处理：

静态资源：如果请求的是静态文件（如 HTML、CSS、JavaScript 文件），服务器直接读取文件并返回。
动态资源：如果请求的是动态内容（如由服务器端脚本生成的页面），服务器会执行相应的脚本（如 PHP、Node.js、Python 等）并生成响应。

7. 服务器发送响应

服务器生成响应后，通过已建立的 TCP 连接将响应发送回浏览器：

HTTP 响应：包括状态行（如 HTTP/1.1 200 OK）、响应头（如 Content-Type: text/html）和响应体（如 HTML 内容）。

8. 浏览器解析响应

浏览器接收到服务器的响应后，开始解析响应内容：

HTML 解析：浏览器解析 HTML 文档，构建 DOM 树。
CSS 解析：解析 CSS 文件，构建 CSSOM 树。
JavaScript 执行：解析并执行 JavaScript 代码。
渲染：结合 DOM 树和 CSSOM 树，生成渲染树，然后进行布局和绘制，最终显示在屏幕上。

9. 加载资源

浏览器会继续加载页面中引用的其他资源，如图片、字体、额外的 JavaScript 文件等，这些资源的加载过程与主页面的加载过程类似。

10. 渲染页面

所有资源加载完成后，浏览器会完成页面的渲染，用户可以看到完整的网页内容。

11. 交互

用户可以与页面进行交互，触发各种事件（如点击按钮、滚动页面等），浏览器会根据事件处理程序进行相应的操作。

什么是http

一个 HTTP 请求由以下几个部分组成：

请求行：包含请求方法、请求 URI 和 HTTP 版本。
- 请求方法：常见的请求方法有 GET、POST、PUT、DELETE 等。
- 请求 URI：指定请求的资源路径。
- HTTP 版本：如 HTTP/1.1 或 HTTP/2。
请求头：包含关于请求的元数据，如 Host、User-Agent、Accept 等。
请求体：可选，用于携带请求的数据，如表单数据或 JSON 数据。

响应

一个 HTTP 响应由以下几个部分组成：

状态行：包含 HTTP 版本、状态码和状态消息。
- 状态码：表示请求的结果，如 200（成功）、404（未找到）、500（内部服务器错误）等。
- 状态消息：对状态码的简短描述。
响应头：包含关于响应的元数据，如 Content-Type、Content-Length、Set-Cookie 等。
响应体：可选，包含请求资源的内容，如 HTML 页面、JSON 数据等。

3. 常见请求方法

GET：请求指定的资源，不应有副作用。
POST：向指定资源提交数据，通常用于提交表单。
PUT：替换指定资源的所有当前表示。
DELETE：删除指定的资源。
HEAD：请求资源的头部信息，不返回资源本身。
OPTIONS：请求支持的方法列表。

4. 状态码

HTTP 状态码分为五类：

1xx：信息性状态码，表示请求已被接收，继续处理。
2xx：成功状态码，表示请求已成功被服务器接收、理解，并接受。
3xx：重定向状态码，表示需要客户端采取进一步的操作才能完成请求。
4xx：客户端错误状态码，表示请求有误或无法完成。
5xx：服务器错误状态码，表示服务器在处理请求的过程中发生了错误。

5. 无状态性

HTTP 是无状态的协议，每个请求都是独立的，服务器不会保留请求之间的状态信息。为了实现会话管理，通常使用 Cookie、Session 等机制。

6. 安全性

HTTP：明文传输，数据可能被窃听或篡改。
HTTPS：HTTP 的安全版本，通过 TLS/SSL 协议加密传输数据，确保数据的安全性和完整性。

7. 缓存

HTTP 支持缓存机制，通过缓存控制头（如 Cache-Control、Expires）来优化性能，减少网络流量。

8. 版本

HTTP/1.0：早期版本，每个请求需要建立一个新的连接。
HTTP/1.1：引入了持久连接（Persistent Connection），支持管道化（Pipelining）。
HTTP/2：引入了多路复用（Multiplexing）、头部压缩等特性，提高了性能。
HTTP/3：基于 QUIC 协议，进一步优化了性能和安全性。

请求示例

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

响应示例

HTTP/1.1 200 OK
Date: Tue, 14 Nov 2023 12:00:00 GMT
Server: Apache/2.4.41 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 135

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Welcome to Example Page</h1>
</body>
</html>

初识 HTTP 协议 青训营打卡day11 | 包MarsCode AI刷题