课时02：互联网工作原理¶
学习目标：理解客户端与服务器之间的数据交互机制，掌握 HTTP 请求的基本流程及浏览器渲染原理。
一、互联网的核心理念¶
1.1 "上网即请求数据"¶
互联网通信的本质是客户端向服务器请求数据，服务器响应并返回数据的循环过程。网页浏览的每一个动作，底层都是物理文件的传输：
- 用户在浏览器输入网址（或点击链接）
- 浏览器向远程服务器发送请求
- 服务器查找对应资源并返回响应
- 浏览器接收数据并渲染为可视化页面
1.2 核心角色定义¶
| 角色 | 定位 | 核心职责 |
|---|---|---|
| 客户端（Client） | 用户终端设备 | 发起请求、接收响应、渲染内容 |
| 服务器（Server） | 提供服务的计算机 | 存储资源、处理请求、返回数据 |
| 浏览器（Browser） | 客户端的核心软件 | 发送 HTTP 请求、解析 HTML/CSS/JS、构建渲染树 |
二、服务器（Server）详解¶
2.1 服务器的本质¶
服务器是一种专为持续提供服务而设计的高性能计算机，与普通个人计算机相比：
- 硬件特性：具备高速 CPU 运算能力、大容量内存、冗余存储及稳定电源供应
- 运行特性：7×24 小时不间断运行，确保用户随时可访问服务
- 价格特性：专业服务器硬件成本远高于普通计算机
2.2 核心功能¶
- 资源存储：存放网页所需的全部文件（HTML、CSS、JavaScript、图片、音视频、字体等）
- 服务提供：为各类终端设备（PC、智能手机、ATM、IoT 设备等）提供计算或应用服务
- 文件交互：通过 FTP、SFTP 等协议支持开发者上传、更新站点文件
三、浏览器（Browser）详解¶
3.1 五大主流浏览器内核¶
| 厂商 | 浏览器 | 内核/引擎 | 特点 |
|---|---|---|---|
| Chrome | Blink | 性能优异，开发者工具完善 | |
| Mozilla | Firefox | Gecko | 开源，隐私保护特性突出 |
| Microsoft | Edge | Blink（新版） | 与 Windows 深度集成 |
| Opera | Opera | Blink | 资源占用低，内置 VPN 功能 |
| Apple | Safari | WebKit | macOS/iOS 默认浏览器，能效优化突出 |
国内浏览器说明：360、QQ、搜狗等浏览器本质上是基于 Chromium（Blink）或 Trident 内核进行二次封装，针对国内用户习惯添加附加功能（如双核切换、广告过滤）。
3.2 浏览器工作原理¶
3.3 缓存机制¶
浏览器的缓存（Cache）机制显著提升了二次访问速度：
- 首次访问：浏览器需从服务器下载全部资源（HTML、CSS、JS、图片等），加载较慢
- 二次访问：浏览器优先读取本地缓存中的静态资源，仅重新请求可能变动的内容，实现"秒级"加载
- 缓存策略：通过 HTTP 响应头（如
Cache-Control、Expires、ETag）控制缓存有效期
四、HTTP 请求完整流程¶
4.1 HTTP 协议特性¶
HTTP（HyperText Transfer Protocol） 是客户端与服务器之间通信的应用层协议：
- 无连接性：每次通信需独立建立连接，通信结束后立即断开，不保持持久状态
- 无状态性：服务器不记录客户端的历史请求信息，需通过 Cookie/Session 机制维持状态
- 请求-响应模型：通信由客户端发起，服务器被动响应
4.2 一次完整的 HTTP 请求历程¶
| 步骤 | 阶段名称 | 详细说明 |
|---|---|---|
| 1 | DNS 域名解析 | 浏览器将域名（如 www.example.com）解析为 IP 地址（如 192.168.1.1），服务器仅识别数字 IP |
| 2 | 建立 TCP 连接 | 通过三次握手建立客户端与服务器之间的可靠传输通道 |
| 3 | 发送 HTTP 请求 | 浏览器构造 HTTP 请求报文（包含请求方法、URL、请求头、请求体），发送至服务器 |
| 4 | 服务器处理 | 服务器接收请求，查询数据库或文件系统，执行业务逻辑 |
| 5 | 返回 HTTP 响应 | 服务器构造响应报文（包含状态码、响应头、响应体），返回客户端 |
| 6 | 断开 TCP 连接 | 通过四次挥手释放连接资源 |
| 7 | 客户端渲染 | 浏览器解析 HTML 构建 DOM 树，解析 CSS 构建 CSSOM 树，合并为渲染树并绘制页面 |