K Kiara's Tech Planet Tech Planet
Frontend / Network

计算机网络学习地图：从分层模型到浏览器请求链路

计算机网络 HTTP HTTPS TCP DNS 浏览器

前言

学习计算机网络，最容易卡在两个地方：

  • 知识点太多，协议名像一张散开的网。
  • 只背概念，不知道它们在真实请求里站在哪一环。

所以这个专题的目标不是一口气背完所有协议，而是先建立一条主线：

1
2
3
4
5
6
7
8
9
10
11
浏览器发起请求
  ↓
找到域名对应的 IP
  ↓
建立连接
  ↓
传输请求和响应
  ↓
浏览器处理缓存、安全和跨域
  ↓
出现问题时能够定位是哪一层出了问题

1. 先理解网络分层

网络分层的意义是把复杂通信拆成多个相对独立的问题。

常见有两套模型：

  • OSI 七层模型：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。
  • TCP/IP 四层模型：网络接口层、网络层、传输层、应用层。

前端学习时可以先抓住这条简化链路：

1
2
3
4
应用层：HTTP、DNS、WebSocket
传输层：TCP、UDP、QUIC
网络层：IP、ICMP、路由
数据链路层：MAC、ARP、以太网

理解分层以后，很多问题会变清楚：

  • DNS 负责把域名解析成 IP。
  • IP 负责让数据包能跨网络转发。
  • TCP 负责可靠传输。
  • TLS 负责加密和身份校验。
  • HTTP 负责应用层语义。

2. 一次请求经过哪些阶段

以访问 https://example.com 为例，可以把链路拆成七步。

1. 浏览器处理 URL

浏览器会先解析协议、域名、端口、路径和查询参数。

如果是 HTTPS，默认端口是 443；如果是 HTTP，默认端口是 80。

2. 查找缓存

浏览器会判断当前资源是否可以直接从缓存读取。

常见缓存分两类：

  • 强缓存：不发请求，直接使用本地缓存。
  • 协商缓存：发请求问服务端资源有没有变化。

3. DNS 解析

如果没有可用缓存，浏览器需要把域名解析成 IP 地址。

DNS 查询可能经过：

  • 浏览器 DNS 缓存
  • 操作系统 DNS 缓存
  • 本地 hosts 文件
  • 本地 DNS 服务器
  • 根域名服务器、顶级域名服务器、权威域名服务器

4. 建立连接

拿到 IP 后，浏览器会和服务器建立连接。

如果是 HTTP/1.1 或 HTTP/2，通常先建立 TCP 连接：

1
2
3
4
三次握手
客户端 -> 服务端：SYN
服务端 -> 客户端：SYN + ACK
客户端 -> 服务端：ACK

如果是 HTTPS，还需要进行 TLS 握手，用来完成加密参数协商和证书校验。

5. 发送 HTTP 请求

请求包含：

  • 请求行：方法、路径、协议版本
  • 请求头：Host、User-Agent、Cookie、Accept、Cache-Control 等
  • 请求体：POST、PUT 等请求可能携带数据

6. 服务端处理并返回响应

响应包含：

  • 状态行：协议版本、状态码、状态描述
  • 响应头：Content-Type、Set-Cookie、Cache-Control、ETag 等
  • 响应体：HTML、JSON、图片、脚本、样式等

7. 浏览器继续加载资源

如果响应是 HTML，浏览器还会继续解析并加载 CSS、JS、图片、字体等资源。

这又会触发新的 DNS、连接、缓存和 HTTP 请求过程，只是很多连接和缓存可以复用。

3. 前端最应该优先掌握什么

如果从前端工程视角补网络，建议优先级是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
HTTP / HTTPS
  ↓
DNS
  ↓
TCP
  ↓
浏览器缓存
  ↓
Cookie / Session / Token
  ↓
CORS 跨域
  ↓
CDN 与性能优化
  ↓
网络排查工具

原因很简单：这些知识直接影响日常开发、性能优化、线上排查和安全边界。

4. 专题文章规划

基础主线

  • 网络分层：OSI 和 TCP/IP 到底怎么理解
  • IP、子网、路由与 NAT
  • TCP 为什么可靠：握手、挥手、窗口和拥塞控制
  • UDP 与 QUIC：为什么 HTTP/3 不继续基于 TCP

应用层主线

  • DNS 解析全过程
  • HTTP 报文、方法、状态码和 Header
  • HTTPS 与 TLS 握手
  • HTTP/1.1、HTTP/2、HTTP/3 对比
  • WebSocket、SSE 与长连接

浏览器主线

  • 输入 URL 到页面展示发生了什么
  • 浏览器缓存机制
  • Cookie、SameSite 和跨站请求
  • CORS 与 OPTIONS 预检请求
  • DevTools Network 面板怎么看

工程实践主线

  • CDN 加速原理
  • 前端网络性能优化
  • 弱网环境下的请求策略
  • 大文件上传、分片上传和断点续传
  • 线上网络问题排查方法

5. 学习方法

这个专题建议用三种方式一起学：

  1. 画链路图：把一次请求经过的组件画出来。
  2. 抓真实请求：用 DevTools Network 面板观察 DNS、连接、TLS、TTFB 和下载耗时。
  3. 用命令验证：用 ping、tracert、nslookup、curl 验证自己的理解。

不要一开始就陷进协议细节。先知道每一层解决什么问题，再逐步补内部机制。

一句话

计算机网络的学习主线可以压缩成一句话：

一个请求如何找到目标、建立连接、安全传输、拿回响应，并在出问题时被定位。

后面的文章都会围绕这条线展开。