feat: add AI and Backend evolution history with interactive demos, and refine Frontend evolution demo
This commit is contained in:
sanbuphy
@@ -1,20 +1,14 @@
|
||||
# 从 URL 输入到浏览器显示 (From URL to Browser)
|
||||
|
||||
> 💡 **学习指南**：本章节无需网络工程基础，通过交互式演示带你深入了解浏览器如何将一行网址变成丰富多彩的页面。我们将从输入 URL 开始，一步步拆解背后的网络请求、连接建立和页面渲染过程。
|
||||
> 💡 **学习指南**：本章节通过交互式演示，带你深入了解浏览器如何将一行网址变成丰富多彩的页面。我们将从输入 URL 开始，一步步拆解背后的网络请求、连接建立和页面渲染过程。
|
||||
|
||||
## 0. 引言：一次神奇的旅行
|
||||
## 0. 全景图：一次神奇的旅行
|
||||
|
||||
当你在浏览器地址栏输入一个网址并按下回车，短短几秒钟内，背后发生了一系列复杂而精妙的过程。这就像是一次跨越万水千山的旅行。
|
||||
|
||||
它的核心任务只有一个：**将你想要的资源（网页）准确无误地从世界的另一端搬运到你的屏幕上**。
|
||||
|
||||
为了实现这个目标，我们需要解决五个核心挑战：
|
||||
|
||||
1. **寻址 (Addressing)**：如何告诉浏览器我要去哪里？(URL)
|
||||
2. **定位 (Discovery)**：服务器的真实地址是什么？(DNS)
|
||||
3. **连接 (Connection)**：如何建立一条可靠的通路？(TCP/TLS)
|
||||
4. **交流 (Exchange)**：如何用对方听得懂的语言沟通？(HTTP)
|
||||
5. **展示 (Rendering)**：如何将枯燥的代码变成漂亮的画面？(Rendering)
|
||||
我们可以把这个过程分为五个关键阶段，点击下方的步骤来预览整个流程：
|
||||
|
||||
<UrlToBrowserDemo />
|
||||
|
||||
@@ -22,75 +16,63 @@
|
||||
|
||||
## 1. 第一步：寻址 (URL Parsing)
|
||||
|
||||
### 1.1 计算机不知道"去哪里"
|
||||
### 1.1 计算机的"导航地址"
|
||||
|
||||
如果你告诉出租车司机"去那个有很多好吃的商场"，他可能会一头雾水。计算机也是一样，它需要一个精确的地址格式。
|
||||
计算机需要一个精确的地址格式才能找到资源。这就是 **URL (统一资源定位符)** 的作用。它不仅告诉浏览器**去哪里**（域名），还告诉它**怎么去**（协议），以及**找什么**（路径）。
|
||||
|
||||
### 1.2 解决方案：URL (统一资源定位符)
|
||||
|
||||
**URL (Uniform Resource Locator)** 是互联网上的标准地址格式。它不仅告诉浏览器**去哪里**（域名），还告诉它**怎么去**（协议），以及**找什么**（路径）。
|
||||
|
||||
**URL 的解剖学**：
|
||||
试着在下方的模拟地址栏中输入不同的 URL，看看它是如何被拆解的：
|
||||
|
||||
<UrlParserDemo />
|
||||
|
||||
**关键部分解析**：
|
||||
|
||||
- **协议 (Protocol)**：`https` 或 `http`。就像告诉司机是"坐飞机"还是"坐火车"。
|
||||
- **域名 (Host)**：`www.example.com`。目的地的名字，方便人类记忆。
|
||||
- **路径 (Path)**：`/path/to/page`。资源在服务器上的具体位置，就像"3楼302室"。
|
||||
- **参数 (Query)**：`?q=vue`。给服务器的附加指令，就像"我要微辣"。
|
||||
- **Protocol (协议)**：通常是 `https` (安全) 或 `http`。就像告诉司机是"坐飞机"还是"坐火车"。
|
||||
- **Host (域名)**：`www.example.com`。目的地的名字，方便人类记忆。
|
||||
- **Port (端口)**：服务器的"门牌号"。Web 服务默认是 80 (HTTP) 或 443 (HTTPS)，通常省略不写。
|
||||
- **Path (路径)**：`/path/to/page`。资源在服务器文件系统中的具体位置。
|
||||
- **Query (参数)**：`?q=vue`。给服务器的附加指令，就像点餐时的备注"不要香菜"。
|
||||
|
||||
---
|
||||
|
||||
## 2. 第二步：定位 (DNS Lookup)
|
||||
|
||||
### 2.1 为什么不用 IP 地址？
|
||||
### 2.1 互联网的"电话簿"
|
||||
|
||||
计算机之间通信真正识别的是 **IP 地址**（如 `142.250.185.238`），而不是域名（如 `google.com`）。
|
||||
虽然我们记住了 `google.com` 这样的域名，但计算机之间通信真正识别的是 **IP 地址**（如 `142.250.185.238`）。
|
||||
|
||||
- **缺点1**：IP 地址是一串枯燥的数字，人类很难记忆。
|
||||
- **缺点2**：服务器搬家后 IP 会变，但我们希望域名保持不变。
|
||||
**DNS (Domain Name System)** 就是互联网的"电话簿"或"导航系统"。当你输入域名时，浏览器需要先通过 DNS 找到它对应的 IP 地址。
|
||||
|
||||
### 2.2 解决方案：DNS (域名系统)
|
||||
|
||||
**DNS (Domain Name System)** 就像互联网的"电话簿"。当你呼叫 `google.com` 时，DNS 会帮你查找它对应的电话号码（IP 地址）。
|
||||
|
||||
这个查找过程是**分级**且**递归**的，就像你问村长，村长问镇长，镇长问市长...
|
||||
点击下方的 **"Go"** 按钮，观察 DNS 的**递归查询**过程：
|
||||
|
||||
<DnsLookupDemo />
|
||||
|
||||
**查询流程**：
|
||||
**查询流程解析**：
|
||||
|
||||
1. **浏览器缓存**：先看看口袋里有没有小纸条（最快）。
|
||||
2. **系统缓存**：看看操作系统的记事本 (`/etc/hosts`)。
|
||||
3. **递归查询**：如果都没有，就让 DNS 服务器去问根域名服务器、顶级域名服务器，直到找到答案。
|
||||
1. **浏览器缓存/Hosts**：先看看自己是否最近去过（缓存），或者本地小本本上有没有记（Hosts 文件）。
|
||||
2. **递归解析器 (Recursive Resolver)**：通常由你的 ISP (运营商) 提供。它像个尽职的跑腿员，负责帮你跑完剩下的路。
|
||||
3. **根域名服务器 (Root Server)**：它是 DNS 层级的顶端（`.`）。它不知道具体地址，但知道谁管 `.com`。
|
||||
4. **顶级域名服务器 (TLD Server)**：管理 `.com`、`.org` 等后缀的服务器。它会告诉你 `google.com` 归谁管。
|
||||
5. **权威域名服务器 (Authoritative Server)**：最终的管理者，它知道 `www.google.com` 的确切 IP 地址。
|
||||
|
||||
---
|
||||
|
||||
## 3. 第三步：连接 (TCP Connection)
|
||||
## 3. 第三步：连接 (TCP Handshake)
|
||||
|
||||
### 3.1 为什么不能直接发数据？
|
||||
### 3.1 建立可靠的通路
|
||||
|
||||
互联网是一个充满不确定性的环境。如果你直接扔出一个数据包：
|
||||
拿到 IP 地址后，浏览器找到了服务器。但在传输数据之前，它们必须建立一条可靠的连接，确保双方都能"听得到"且"说得出"。
|
||||
|
||||
- ❌ 它可能在路上丢了。
|
||||
- ❌ 它可能顺序乱了。
|
||||
- ❌ 它可能坏了。
|
||||
这就是著名的 **TCP 三次握手 (Three-Way Handshake)**。
|
||||
|
||||
### 3.2 解决方案：TCP 三次握手
|
||||
|
||||
**TCP (Transmission Control Protocol)** 是一种**可靠**的传输协议。在传输数据之前，通信双方必须先建立连接，确认彼此都能"听得到"且"说得出"。
|
||||
|
||||
这被称为**三次握手 (Three-Way Handshake)**：
|
||||
点击 **"Connect"** 亲自完成这次握手：
|
||||
|
||||
<TcpHandshakeDemo />
|
||||
|
||||
**握手三部曲**：
|
||||
|
||||
1. **SYN**：客户端说"你好，我想和你建立连接"（SYN）。
|
||||
2. **SYN-ACK**：服务器说"收到，我也想和你建立连接"（SYN-ACK）。
|
||||
3. **ACK**：客户端说"好的，那我们开始吧"（ACK）。
|
||||
1. **SYN** (Synchronize)：客户端发送一个包，说"你好，我想和你建立连接，我的序列号是 X"。
|
||||
2. **SYN-ACK** (Synchronize-Acknowledge)：服务器收到后回复，"好的，收到了 X。我也想和你建立连接，我的序列号是 Y"。
|
||||
3. **ACK** (Acknowledge)：客户端最后回复，"好的，收到了 Y。那我们开始传输数据吧"。
|
||||
|
||||
> 🔒 **关于 HTTPS (TLS)**：
|
||||
> 如果使用 HTTPS，在 TCP 握手之后，还会进行 **TLS 握手**。双方会协商加密算法并交换证书，确保后续传输的数据像装在保险箱里一样安全。
|
||||
@@ -99,27 +81,27 @@
|
||||
|
||||
## 4. 第四步：交流 (HTTP Exchange)
|
||||
|
||||
### 4.1 如何索取资源？
|
||||
### 4.1 索取与交付
|
||||
|
||||
连接建立好了，浏览器需要告诉服务器它想要什么。这就像在餐厅点餐，你需要一种服务员能听懂的格式。
|
||||
连接建立好了，浏览器终于可以发出它的请求了："请给我首页的 HTML 代码"。这就像在餐厅点餐。
|
||||
|
||||
### 4.2 解决方案：HTTP 请求与响应
|
||||
**HTTP (HyperText Transfer Protocol)** 定义了这种对话的格式。
|
||||
|
||||
**HTTP (HyperText Transfer Protocol)** 定义了客户端和服务器之间的对话格式。
|
||||
在下方的模拟器中尝试发送不同的请求（GET/POST），观察网络日志：
|
||||
|
||||
<HttpExchangeDemo />
|
||||
|
||||
**对话过程**：
|
||||
|
||||
1. **请求 (Request)**：浏览器发送一个请求报文。
|
||||
- **Method**：`GET`（获取）、`POST`（提交）等。
|
||||
1. **请求 (Request)**：
|
||||
- **Method**：`GET`（获取）、`POST`（提交数据）等。
|
||||
- **Path**：我要什么资源。
|
||||
- **Headers**：我是谁（User-Agent）、我想要什么格式（Accept）。
|
||||
- **Headers**：我是谁（User-Agent）、我想要什么格式（Accept）等元数据。
|
||||
|
||||
2. **响应 (Response)**：服务器返回一个响应报文。
|
||||
- **Status Code**：`200 OK`（成功）、`404 Not Found`（没找到）。
|
||||
- **Headers**：内容类型（Content-Type）、服务器信息。
|
||||
- **Body**：具体的 HTML 代码、图片数据等。
|
||||
2. **响应 (Response)**：
|
||||
- **Status Code**：`200 OK`（成功）、`404 Not Found`（没找到）、`500 Error`（服务器出错了）。
|
||||
- **Headers**：内容类型（Content-Type）、服务器信息等。
|
||||
- **Body**：具体的 HTML 代码、JSON 数据或图片二进制流。
|
||||
|
||||
---
|
||||
|
||||
@@ -127,33 +109,34 @@
|
||||
|
||||
### 5.1 代码如何变成画面？
|
||||
|
||||
浏览器收到的是一堆枯燥的 HTML 代码，它是如何变成我们在屏幕上看到的精美网页的呢？
|
||||
浏览器收到的是一堆枯燥的 HTML 代码，它是如何变成我们在屏幕上看到的精美网页的呢？这个过程叫做**渲染 (Rendering)**。
|
||||
|
||||
### 5.2 解决方案：渲染流水线 (Rendering Pipeline)
|
||||
浏览器就像一个精密的工厂，将原材料（HTML/CSS）加工成最终产品（屏幕上的像素）。
|
||||
|
||||
浏览器像一个精密的工厂，将原材料（HTML/CSS）加工成产品（像素）。
|
||||
点击下方的步骤，查看渲染流水线的每个阶段：
|
||||
|
||||
<BrowserRenderingDemo />
|
||||
|
||||
**流水线步骤**：
|
||||
**关键渲染路径 (Critical Rendering Path)**：
|
||||
|
||||
1. **构建 DOM 树**：解析 HTML，建立文档结构树（就像房屋的框架）。
|
||||
2. **构建渲染树 (Render Tree)**：结合 CSS 样式，确定哪些节点需要显示以及长什么样（就像装修设计图）。
|
||||
3. **布局 (Layout)**：计算每个元素在屏幕上的确切坐标和大小（就像丈量尺寸）。
|
||||
4. **绘制 (Paint)**：将元素画到屏幕的像素点上（就像刷漆）。
|
||||
2. **构建渲染树 (Render Tree)**：结合 CSS 样式，计算出所有**可见**元素的样式规则。
|
||||
3. **布局 (Layout/Reflow)**：计算每个元素在屏幕上的确切坐标和大小（就像丈量尺寸）。
|
||||
4. **绘制 (Paint)**：填充像素，包括颜色、图片、边框等。
|
||||
5. **合成 (Composite)**：将不同的图层（Layer）在 GPU 中合成，最终显示在屏幕上。
|
||||
|
||||
---
|
||||
|
||||
## 6. 总结
|
||||
|
||||
从 URL 输入到页面显示，这短短的几秒钟内，凝聚了计算机网络几十年的智慧结晶：
|
||||
从 URL 输入到页面显示，这短短的几秒钟内，凝聚了计算机网络几十年的智慧结晶。
|
||||
|
||||
| 阶段 | 核心任务 | 关键技术 | 类比 |
|
||||
| :---------- | :------- | :-------- | :------------- |
|
||||
| **1. 寻址** | 解析目标 | URL | 确定目的地地址 |
|
||||
| **2. 定位** | 查找 IP | DNS | 查电话簿 |
|
||||
| **3. 连接** | 建立通路 | TCP/TLS | 打电话确认通畅 |
|
||||
| **4. 交流** | 交换数据 | HTTP | 点餐对话 |
|
||||
| **5. 展示** | 绘制页面 | Rendering | 装修房子 |
|
||||
| 阶段 | 核心任务 | 关键技术 | 类比 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **1. 寻址** | 解析目标 | URL | 确定目的地地址 |
|
||||
| **2. 定位** | 查找 IP | DNS | 查电话簿 |
|
||||
| **3. 连接** | 建立通路 | TCP/TLS | 打电话确认通畅 |
|
||||
| **4. 交流** | 交换数据 | HTTP | 点餐对话 |
|
||||
| **5. 展示** | 绘制页面 | Rendering | 装修房子 |
|
||||
|
||||
现在，当你再次按下回车键时，你已经看到了屏幕背后的那个忙碌而精彩的数字世界。
|
||||
|
||||
Reference in New Issue
Block a user