delorex/test-repo

Fork 0

Files

T

sanbuphy c8567ce23f feat: save current work to dev branch

2026-01-15 20:10:19 +08:00

14 KiB

Raw Blame History

从 URL 输入到浏览器显示

💡 学习指南：当你在浏览器地址栏输入一个网址并按下回车，短短几秒钟内，背后发生了一系列复杂的过程。本章节将通过详细的可视化演示和交互式实验，带你完整理解从 URL 输入到页面渲染的每一个环节。

0. 快速预览：完整流程

在深入每个环节之前，让我们先通过一个交互式演示，了解从输入 URL 到页面显示的完整流程：

整个流程的 10 个步骤：

URL 解析：浏览器检查 URL 格式，提取协议、域名、路径
DNS 查询：将域名转换为 IP 地址
TCP 连接：与服务器建立可靠连接
TLS 握手：协商加密参数（HTTPS）
HTTP 请求：发送请求到服务器
服务器处理：生成响应内容
HTTP 响应：接收数据（HTML、CSS、JS）
DOM 构建：解析 HTML，构建 DOM 树
JS 执行：执行 JavaScript，添加交互
页面渲染：显示页面给用户

1. 第一步：URL 解析

1.1 什么是 URL？

URL (Uniform Resource Locator) 统一资源定位符，就像互联网上的"地址"。

URL 的组成结构：

https://www.example.com:80/path/to/page?query=value#section
  |         |            | |                  |           |
协议       域名         端口      路径            参数       锚点

每一部分的含义：

协议 (Protocol)：https、http、ftp
- 告诉浏览器使用什么方式访问资源
- https 表示加密连接，http 表示明文连接
域名 (Domain)：www.example.com
- 网站的名字，方便人类记忆
- 最终需要通过 DNS 转换为 IP 地址
端口 (Port)：80、443
- 服务器的"门牌号"
- 80 是 HTTP 默认端口，443 是 HTTPS 默认端口
- 如果使用默认端口，通常可以省略
路径 (Path)：/path/to/page
- 服务器上的文件位置
- 类似于电脑上的文件夹路径
查询参数 (Query)：?query=value
- 传递给服务器的额外信息
- 可以有多个参数，用 & 分隔
锚点 (Fragment)：#section
- 页面内的跳转标记
- 不会发送到服务器

1.2 浏览器如何解析 URL？

解析步骤：

检查输入
- 是合法的 URL 吗？
- 是不是搜索关键词？（自动跳转到搜索引擎）
补全 URL
- 自动添加 https:// 前缀
- 补全路径（默认为 /）
编码处理
- 特殊字符需要转换（如空格 → %20）
- 确保地址中只有安全字符

2. 第二步：DNS 查询

2.1 为什么需要 DNS？

计算机不认识域名，只认识 IP 地址。

问题：

❌ IP 地址难记：142.250.185.238 vs google.com
❌ IP 可能变化：服务器迁移时 IP 会变
❌ 负载均衡：一个域名对应多个 IP

解决方案：DNS 域名系统，就像互联网的"电话簿"。

2.2 DNS 查询过程详解

DNS 查询的层次结构：

浏览器缓存（最快）
    ↓ 未命中
系统缓存（/etc/hosts）
    ↓ 未命中
路由器缓存
    ↓ 未命中
ISP DNS 服务器
    ↓ 递归查询
根域名服务器（.）
    ↓ 指向 .com 服务器
顶级域名服务器（.com）
    ↓ 指向 example.com 服务器
权威 DNS 服务器
    ↓ 返回 IP 地址

关键知识点：

缓存很重要：每层缓存都能加速查询
TTL（Time To Live）：缓存过期时间，通常几分钟到几小时
递归查询：DNS 服务器逐级查询，直到找到答案
DNS 预解析：<link rel="dns-prefetch" href="//example.com"> 可以提前解析

3. 第三步：TCP 连接

3.1 为什么需要 TCP？

TCP (Transmission Control Protocol) 传输控制协议，提供可靠的、面向连接的字节流传输。

为什么不用直接发数据包？

❌ 无法保证数据到达
❌ 无法保证数据顺序
❌ 无法控制发送速度
✅ TCP 解决了所有这些问题！

3.2 TCP 三次握手

建立 TCP 连接需要三次握手，这就像打电话确认双方都能听到：

三次握手的详细过程：

客户端                                      服务器
  |                                            |
  | -------- SYN (seq=x) -------------------> |   第一次握手
  |     我想和你建立连接                        |
  |                                            |
  | <------- SYN-ACK (seq=y, ack=x+1) --------|   第二次握手
  |     好的，我也想和你建立连接                   |
  |                                            |
  | -------- ACK (ack=y+1) -------------------> |   第三次握手
  |     好的，连接建立完成！                      |
  |                                            |
  |            连接建立成功 ✅                     |

为什么需要三次？

确认双方都能正常收发数据
- 第一次：客户端能发送 ✅
- 第二次：服务器能接收和发送 ✅
- 第三次：客户端能接收 ✅
防止失效的连接请求
- 网络中可能滞留旧的连接请求
- 三次握手可以避免误用旧连接
同步初始序列号
- 双方需要协商起始号码
- 用于后续数据传输和确认

4. 第四步：TLS 握手（HTTPS）

4.1 什么是 TLS？

TLS (Transport Layer Security) 传输层安全，用于加密 HTTP 通信，即 HTTPS。

为什么需要 HTTPS？

🔒 加密：防止数据被窃听
🛡️ 完整性：防止数据被篡改
🆔 身份验证：防止假冒网站

4.2 TLS 握手过程

客户端                                      服务器
  |                                            |
  | -------- Client Hello ------------------> |
  |     我支持的加密方式                          |
  |                                            |
  | <------- Server Header ------------------- |
  |     服务器证书 + 公钥 + 选择的加密方法            |
  |                                            |
  | 验证证书（检查是否过期、是否可信）                |
  | 生成会话密钥                                 |
  |                                            |
  | -------- 用公钥加密会话密钥 ---------------> |
  |                                            |
  | <------- 加密通信开始 ----------------------|
  |     所有后续数据都用会话密钥加密                 |

HTTPS vs HTTP 对比：

特性	HTTP	HTTPS
加密	❌ 明文传输	✅ 加密传输
端口	80	443
安全性	低，容易被窃听	高，难以破解
性能	略快	略慢（握手开销）
SEO	不友好	友好

5. 第五步：HTTP 请求

5.1 HTTP 请求格式

HTTP 请求示例：

GET /page HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive

[请求体可选]

请求头解释：

GET /page：请求方法（获取资源）和路径
Host：目标域名（因为一个服务器可能托管多个网站）
User-Agent：浏览器标识（服务器根据此返回适配的内容）
Accept：客户端能接受的内容类型
Connection：keep-alive（保持连接，加快后续请求）

常见 HTTP 方法：

方法	用途	示例
GET	获取资源	查看网页、图片
POST	提交数据	表单提交、登录
PUT	更新资源	更新用户信息
DELETE	删除资源	删除文章
HEAD	获取头信息	检查文件是否存在

6. 第六步：服务器处理

6.1 服务器接收请求

处理流程：

解析请求
- 读取请求行、请求头、请求体
- 提取请求方法、路径、参数
路由匹配
- 找到对应的处理程序
- 例如：/page → pageController.js
业务逻辑
- 执行代码
- 查询数据库
- 调用其他服务
生成响应
- 创建 HTML、JSON 等数据
- 设置状态码、响应头

6.2 常见服务器

Nginx：高性能 Web 服务器（反向代理、负载均衡）
Apache：老牌 Web 服务器（模块化、灵活）
Node.js：JavaScript 服务器（前后端统一语言）
Tomcat：Java 应用服务器（企业级应用）

7. 第七步：HTTP 响应

7.1 HTTP 响应格式

HTTP 响应示例：

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1234
Date: Mon, 15 Jan 2026 10:00:00 GMT
Server: nginx
Cache-Control: max-age=3600

<!DOCTYPE html>
<html>
<head><title>Example</title></head>
<body><h1>Hello</h1></body>
</html>

7.2 HTTP 状态码

状态码分类：

2xx 成功
- 200 OK：请求成功
- 201 Created：资源创建成功
3xx 重定向
- 301 Moved Permanently：永久重定向
- 302 Found：临时重定向
4xx 客户端错误
- 400 Bad Request：请求格式错误
- 401 Unauthorized：未授权
- 403 Forbidden：禁止访问
- 404 Not Found：资源不存在
5xx 服务器错误
- 500 Internal Server Error：服务器内部错误
- 502 Bad Gateway：网关错误
- 503 Service Unavailable：服务不可用

8. 第八步：DOM 构建

8.1 解析 HTML

浏览器接收到的 HTML 文档需要被解析成 DOM 树。

HTML 示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <div id="app">
    <h1>标题</h1>
    <p>段落</p>
  </div>
</body>
</html>

对应的 DOM 树结构：

html
├── head
│   └── title
│       └── "我的网页"
└── body
    └── div (#app)
        ├── h1
        │   └── "标题"
        └── p
            └── "段落"

DOM (Document Object Model) 文档对象模型，是浏览器对 HTML 文档的内部表示，可以通过 JavaScript 操作。

9. 第九步：JavaScript 执行

9.1 JavaScript 的作用

✅ 修改 DOM 结构
✅ 响应用户交互（点击、输入）
✅ 发送网络请求
✅ 动态更新页面

执行时机：

阻塞执行：<script> 标签默认阻塞页面渲染
异步加载：<script async> 或 <script defer> 优化加载
DOMContentLoaded：HTML 解析完成后触发
load：所有资源（图片、样式）加载完成后触发

10. 第十步：页面渲染

10.1 渲染流程

DOM + CSSOM → Render Tree → Layout → Paint → Composite
   树          渲染树        布局      绘制      合成

每个步骤的作用：

构建渲染树：合并 DOM 和 CSSOM
布局：计算每个元素的位置和大小
绘制：绘制元素到图层
合成：合并图层显示到屏幕

10.2 关键渲染指标

FP (First Paint)：首次绘制，第一个像素出现
FCP (First Contentful Paint)：首次内容绘制，文本或图片出现
LCP (Largest Contentful Paint)：最大内容绘制，主要内容出现
TTI (Time to Interactive)：可交互时间，页面完全可用

11. 性能优化技巧

11.1 网络优化

减少 DNS 查询：使用 DNS 预解析
减少 HTTP 请求：合并资源
使用 HTTP/2：多路复用，并行加载
启用压缩：gzip、brotli
使用 CDN：就近访问，加速下载

11.2 渲染优化

关键 CSS 内联：减少渲染阻塞
异步加载 JS：defer 或 async
图片懒加载：loading="lazy"
避免重排重绘：使用 CSS transform

11.3 缓存策略

强缓存：

Cache-Control: max-age=3600

协商缓存：

ETag: "123456789"
Last-Modified: Mon, 15 Jan 2026 10:00:00 GMT

12. 实战：使用开发者工具观察

12.1 Network 面板

如何使用：

打开开发者工具（F12）
切换到 Network 标签
刷新页面
查看所有资源加载时间

关键信息：

Waterfall（瀑布图）：显示时间线
Size：资源大小
Time：加载时间
Status：状态码
Type：资源类型（document、stylesheet、script 等）

12.2 Performance 面板