delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance demo components with consistent styling and info boxes

Browse Source 
- Add standardized header and info box components to all demo files
- Improve visual consistency with theme colors and spacing
- Add max-height and overflow-y for better content containment
- Update package.json build script with --force flag
- Add .gitignore entries for REFACTORING files
- Fix table formatting in audio-intro.md
This commit is contained in:
sanbuphy
2026-02-14 12:14:07 +08:00
parent cd2ce9e661
commit ebe2bf6109
70 changed files with 12307 additions and 10445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/zh-cn/appendix/url-to-browser.md
+67 -54
View File
@@ -2,11 +2,6 @@
<script setup>
import UrlToBrowserQuickStart from '../../.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
import UrlParserDemo from '../../.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue'
import DnsLookupDemo from '../../.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue'
import TcpHandshakeDemo from '../../.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue'
import HttpExchangeDemo from '../../.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue'
import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue'
</script>
> **学习指南**：本章节无需编程基础。我们将用**"网购"**的生活化比喻，配合**真实的技术过程**，带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。
@@ -16,6 +11,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
## 0. 引言：当你按下回车键的那一刻
想象你正在进行一次**网购**。你需要：
1. **填写订单**（选好商品，确认收货地址）
2. **系统查找仓库**（根据店铺名找到具体的发货仓库）
3. **建立物流通道**（确保仓库正常营业且能发货）
@@ -35,6 +31,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
### 生活比喻：填写购物单
假设你只在订单上写"买鞋子"，仓库肯定不知道发哪双。你需要写清楚：
- **店铺类型**（官方旗舰店/普通店）
- **店铺名称**（Nike 官方店）
- **商品位置**（男鞋区/跑鞋系列）
@@ -45,14 +42,14 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
**URL（Uniform Resource Locator，统一资源定位符）**就是浏览器世界的"商品定位码"。当你在地址栏输入 `https://www.example.com:8080/path/page.html?id=123#section`，浏览器会立即拆解它：
| URL 部分 | 示例值 | 网购类比 | 技术作用 |
|----------|--------|-----------|----------|
| **协议** `https://` | 安全超文本传输协议 | **物流方式**：保密配送（HTTPS）vs 普通配送（HTTP） | 决定使用什么规则通信。`http` 是普通传输，`https` 是加密传输 |
| **域名** `www.example.com` | 服务器的人类可读名字 | **店铺名称**：京东超市 | 告诉浏览器要找哪台服务器。域名是为了让人记住，最终要转换成 IP 地址 |
| **端口** `:8080` | 服务器的具体"门牌号" | **柜台编号**：3号柜台（默认不写） | 服务器上可能有多个服务，端口指定访问哪一个。HTTP 默认 80，HTTPS 默认 443 |
| **路径** `/path/page.html` | 服务器上的文件位置 | **货架位置**：日用品区/第三排 | 指定服务器上的具体资源位置 |
| **查询参数** `?id=123` | 附加信息 | **订单备注**：红色、XL码 | 传递给服务器的额外数据，如搜索关键词、页码等 |
| **锚点** `#section` | 页面内的位置 | **说明书页码**：翻到第5页 | 页面加载后自动滚动到指定位置，不发送给服务器 |
| URL 部分 | 示例值 | 网购类比 | 技术作用 |
| -------------------------- | -------------------- | -------------------------------------------------- | ------------------------------------------------------------------------ |
| **协议** `https://` | 安全超文本传输协议 | **物流方式**：保密配送（HTTPS）vs 普通配送（HTTP） | 决定使用什么规则通信。`http` 是普通传输，`https` 是加密传输 |
| **域名** `www.example.com` | 服务器的人类可读名字 | **店铺名称**：京东超市 | 告诉浏览器要找哪台服务器。域名是为了让人记住，最终要转换成 IP 地址 |
| **端口** `:8080` | 服务器的具体"门牌号" | **柜台编号**：3号柜台（默认不写） | 服务器上可能有多个服务，端口指定访问哪一个。HTTP 默认 80，HTTPS 默认 443 |
| **路径** `/path/page.html` | 服务器上的文件位置 | **货架位置**：日用品区/第三排 | 指定服务器上的具体资源位置 |
| **查询参数** `?id=123` | 附加信息 | **订单备注**：红色、XL码 | 传递给服务器的额外数据，如搜索关键词、页码等 |
| **锚点** `#section` | 页面内的位置 | **说明书页码**：翻到第5页 | 页面加载后自动滚动到指定位置，不发送给服务器 |
<UrlParserDemo />
@@ -65,6 +62,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
### 生活比喻：查仓库地址
你下单写的是"Nike 官方店"，但物流系统不知道仓库在哪。它需要查地址簿：
1. 先查**常用地址**（最近买过这家吗）→ 浏览器缓存
2. 没有的话问**小区快递点**（他们知道大区域的分配）→ 本地 DNS 服务器
3. 问**总部调度中心**（知道.com类店铺归谁管）→ 根域名服务器
@@ -89,6 +87,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
```
**查询类型说明：**
- **递归查询（Recursive Query）**：浏览器只发一次请求，本地 DNS 负责层层查询后返回结果
- **迭代查询（Iterative Query）**：每一层只告诉下一层去哪查，浏览器需要多次查询
- **缓存机制**：查询结果会被缓存，下次直接返回，大大加速访问
@@ -104,6 +103,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
### 生活比喻：建立物流通道
假设物流车直接开到仓库，结果：
- 仓库关门了 → 白跑一趟
- 仓库爆仓不接单 → 无法发货
- 找不到卸货口 → 无法对接
@@ -135,6 +135,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
三次握手确保：**双方都能发、双方都能收** —— 四个条件都满足，才能可靠传输。
**TCP 还负责：**
- **数据分包**：大数据拆成小数据包传输
- **顺序重组**：确保数据包按正确顺序组装
- **错误重传**：丢包后自动重新发送
@@ -158,6 +159,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
**HTTP（HyperText Transfer Protocol，超文本传输协议）**是浏览器和服务器之间的"对话规则"。通道建立后，浏览器发送**取货请求**，**核心目标是拿回网页的源代码（HTML 文件）**：
**HTTP 请求示例：**
```http
GET /index.html HTTP/1.1 ← 请求方法 + 路径 + 协议版本
Host: www.example.com ← 目标主机（支持虚拟主机，一台服务器可托管多个网站）
@@ -174,8 +176,9 @@ Cookie: session_id=abc123 ← 身份凭证
你平时写的 API 调用（`fetch` / `axios`）和浏览器访问网页，在 **HTTP 层面完全是同一个东西**。
它们都是发送一个请求，服务器返回一段文本数据。
* 如果服务器给的是 **HTML**，浏览器就把它**画出来**（变成网页）。
* 如果服务器给的是 **JSON**，你的代码就把它**存起来**（用于逻辑处理）。
- 如果服务器给的是 **HTML**，浏览器就把它**画出来**（变成网页）。
- 如果服务器给的是 **JSON**，你的代码就把它**存起来**（用于逻辑处理）。
**根本就没有"两种"请求，只有同一种 HTTP 请求，只是返回的数据格式（Content-Type）不同而已。**
这也是为什么理解了 HTTP，你就理解了 90% 的后端 API 原理。
@@ -184,6 +187,7 @@ Cookie: session_id=abc123 ← 身份凭证
:::
**常见 HTTP 方法：**
- `GET`：获取资源（安全、幂等，可被缓存）
- `POST`：提交数据（创建资源，如注册、登录）
- `PUT`：更新资源（完整替换）
@@ -192,6 +196,7 @@ Cookie: session_id=abc123 ← 身份凭证
- `HEAD`：获取响应头（不返回主体，用于检查资源是否存在）
**服务器返回 HTTP 响应：**
```http
HTTP/1.1 200 OK ← 协议版本 + 状态码 + 状态描述
Date: Mon, 23 May 2025 12:00:00 GMT ← 服务器时间
@@ -205,18 +210,18 @@ Set-Cookie: user_id=xyz789 ← 设置 Cookie
**HTTP 状态码分类：**
| 状态码 | 类别 | 含义 | 生活类比 |
|--------|------|------|----------|
| **200** | 成功 | 请求成功处理 | "订单确认，马上发货" |
| **301/302** | 重定向 | 资源已移动 | "本店搬家了，请去新店下单" |
| **304** | 未修改 | 缓存仍有效 | "你上次买的还能用，不用重新发货" |
| **400** | 客户端错误 | 请求格式错误 | "订单填写模糊，看不懂" |
| **401** | 未授权 | 需要身份验证 | "请先出示会员卡" |
| **403** | 禁止访问 | 权限不足 | "非内部人员禁止入内" |
| **404** | 未找到 | 资源不存在 | "仓库里没这款商品" |
| **500** | 服务器错误 | 服务器内部错误 | "仓库起火了，暂时发不了货" |
| **502** | 网关错误 | 上游服务器无响应 | "总仓没货了，分仓也调不到" |
| **503** | 服务不可用 | 服务器过载或维护 | "爆单了，暂停接单" |
| ----------- | ---------- | ---------------- | -------------------------------- |
| **200** | 成功 | 请求成功处理 | "订单确认，马上发货" |
| **301/302** | 重定向 | 资源已移动 | "本店搬家了，请去新店下单" |
| **304** | 未修改 | 缓存仍有效 | "你上次买的还能用，不用重新发货" |
| **400** | 客户端错误 | 请求格式错误 | "订单填写模糊，看不懂" |
| **401** | 未授权 | 需要身份验证 | "请先出示会员卡" |
| **403** | 禁止访问 | 权限不足 | "非内部人员禁止入内" |
| **404** | 未找到 | 资源不存在 | "仓库里没这款商品" |
| **500** | 服务器错误 | 服务器内部错误 | "仓库起火了，暂时发不了货" |
| **502** | 网关错误 | 上游服务器无响应 | "总仓没货了，分仓也调不到" |
| **503** | 服务不可用 | 服务器过载或维护 | "爆单了，暂停接单" |
<HttpExchangeDemo />
---
@@ -263,22 +268,29 @@ Document
```css
.header {
.content { display: none; } /* 内容暂时隐藏 */
```
color: blue;
font-size: 24px;
} /* 标题要是蓝色的 */
.content {
display: none;
} /* 内容暂时隐藏 */
```
#### 步骤3：合并 → 渲染树 (准备组装)
DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
关键点：**只有"可见"的元素才会在渲染树中**。
* `.content`：**不在**渲染树中（因为 `display: none`，就像被扔掉的包装纸，不需要组装）。
- `.header`：在渲染树中（可见）。
- `.content`：**不在**渲染树中（因为 `display: none`，就像被扔掉的包装纸，不需要组装）。
#### 步骤4：布局 (Layout / Reflow) —— 测量尺寸
浏览器计算渲染树中每个节点在屏幕上的**精确坐标和大小**。
* 这个过程叫**重排 (Reflow)**。如果窗口大小变了（比如手机横屏），所有元素的位置都要重新计算，非常消耗性能。
- "这个标题框宽 100px，高 50px，放在屏幕左上角 (0,0) 位置。"
- 这个过程叫**重排 (Reflow)**。如果窗口大小变了（比如手机横屏），所有元素的位置都要重新计算，非常消耗性能。
#### 步骤5：绘制 (Paint) —— 上色
知道位置后，浏览器开始填充像素：画背景色、文字颜色、边框、阴影等。
@@ -300,17 +312,18 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
让我们回顾整个旅程：
| 阶段 | 技术术语 | 网购类比 | 核心任务 | 关键技术 |
|------|----------|----------|----------|----------|
| **1. 解析** | URL 解析 | 填写订单 | 理解买家想买什么 | 协议、域名、端口、路径、参数 |
| **2. 查询** | DNS 查询 | 查仓库址 | 找到店铺的发货仓库 | 递归/迭代查询、缓存机制 |
| **3. 连接** | TCP 握手 | 建立通道 | 确保物流通畅 | 三次握手、序列号、流量控制 |
| **4. 对话** | HTTP 交换 | 仓库发货 | 提交订单并收货 | 请求方法、状态码、头部字段 |
| **5. 展示** | 浏览器渲染 | 拆箱组装 | 把商品展示出来 | DOM、CSSOM、渲染树、布局、绘制 |
| ----------- | ---------- | -------- | ------------------ | ------------------------------ |
| **1. 解析** | URL 解析 | 填写订单 | 理解买家想买什么 | 协议、域名、端口、路径、参数 |
| **2. 查询** | DNS 查询 | 查仓库址 | 找到店铺的发货仓库 | 递归/迭代查询、缓存机制 |
| **3. 连接** | TCP 握手 | 建立通道 | 确保物流通畅 | 三次握手、序列号、流量控制 |
| **4. 对话** | HTTP 交换 | 仓库发货 | 提交订单并收货 | 请求方法、状态码、头部字段 |
| **5. 展示** | 浏览器渲染 | 拆箱组装 | 把商品展示出来 | DOM、CSSOM、渲染树、布局、绘制 |
**整个过程通常在几百毫秒内完成** —— 想想这有多么不可思议！
你的浏览器在不到1秒的时间里：
- 解析了一个复杂的地址
- 查询了分布在全球的 DNS 服务器
- 和千里之外的服务器建立了可靠连接
- 进行了一次完整的 HTTP 对话
@@ -323,20 +336,20 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
## 7. 名词速查表 (Glossary)
| 名词 | 全称 | 简单解释 |
|------|------|----------|
| **URL** | Uniform Resource Locator | **统一资源定位符**。网页的"地址"，告诉浏览器去哪里找资源。 |
| **DNS** | Domain Name System | **域名系统**。互联网的"电话簿"，把人类可读的域名转换成机器可读的 IP 地址。 |
| **IP 地址** | Internet Protocol Address | **互联网协议地址**。每台联网设备的唯一"门牌号"，如 `192.168.1.1`。 |
| **TCP** | Transmission Control Protocol | **传输控制协议**。确保数据可靠传输的"规则"，通过三次握手建立连接。 |
| **HTTP** | HyperText Transfer Protocol | **超文本传输协议**。浏览器和服务器"对话"的规则。 |
| **HTTPS** | HTTP Secure | **安全的 HTTP**。在 HTTP 基础上加了加密（TLS/SSL），保护数据安全。 |
| **HTML** | HyperText Markup Language | **超文本标记语言**。网页的"骨架"，定义内容的结构。 |
| **CSS** | Cascading Style Sheets | **层叠样式表**。网页的"皮肤"，定义内容的外观。 |
| **DOM** | Document Object Model | **文档对象模型**。浏览器把 HTML 转换成的树形结构，方便操作。 |
| **CSSOM** | CSS Object Model | **CSS 对象模型**。浏览器把 CSS 转换成的树形结构。 |
| **渲染** | Rendering | 浏览器把代码转换成屏幕像素的过程。 |
| **RTT** | Round Trip Time | **往返时间**。数据包从发送到接收确认的时间，影响网页加载速度。 |
| ----------- | ----------------------------- | -------------------------------------------------------------------------- |
| **URL** | Uniform Resource Locator | **统一资源定位符**。网页的"地址"，告诉浏览器去哪里找资源。 |
| **DNS** | Domain Name System | **域名系统**。互联网的"电话簿"，把人类可读的域名转换成机器可读的 IP 地址。 |
| **IP 地址** | Internet Protocol Address | **互联网协议地址**。每台联网设备的唯一"门牌号"，如 `192.168.1.1`。 |
| **TCP** | Transmission Control Protocol | **传输控制协议**。确保数据可靠传输的"规则"，通过三次握手建立连接。 |
| **HTTP** | HyperText Transfer Protocol | **超文本传输协议**。浏览器和服务器"对话"的规则。 |
| **HTTPS** | HTTP Secure | **安全的 HTTP**。在 HTTP 基础上加了加密（TLS/SSL），保护数据安全。 |
| **HTML** | HyperText Markup Language | **超文本标记语言**。网页的"骨架"，定义内容的结构。 |
| **CSS** | Cascading Style Sheets | **层叠样式表**。网页的"皮肤"，定义内容的外观。 |
| **DOM** | Document Object Model | **文档对象模型**。浏览器把 HTML 转换成的树形结构，方便操作。 |
| **CSSOM** | CSS Object Model | **CSS 对象模型**。浏览器把 CSS 转换成的树形结构。 |
| **渲染** | Rendering | 浏览器把代码转换成屏幕像素的过程。 |
| **RTT** | Round Trip Time | **往返时间**。数据包从发送到接收确认的时间，影响网页加载速度。 |
---
> **恭喜！** 现在当你再次在地址栏输入网址时，你已经能看到屏幕背后的那个忙碌而精彩的数字世界了。