一. 用户输入URL
比如输入：
浏览器首先会解析URL:
一个URL主要包含：
- 协议（https）
- 域名（www.baidu.com）
- 端口（80）
- 路径（/）
解析结果：
协议：https
端口：80
资源路径：/
二. 浏览器检查缓存
浏览器不会立刻发请求，而是先看本地有没有缓存。
缓存检查顺序：
- 强缓存（不用发请求）
检查：
Expires
Cache-Control
如果没过期
直接用缓存
状态：
from memory cache
或者
from disk cache
- 协商缓存（要问服务器）
如果强缓存失效
带上：
If -None-Match
If-Modified-Since
服务器判断
资源没变
返回:
304 Not Modified
浏览器继续用缓存
三. DNS解析（域名 -> IP）
浏览器要找到服务器IP。
例如：
www.baidu.com -> 119.75.217.109
查询过程：
-
浏览器DNS缓存
若有，直接返回
-
操作系统DNS缓存
Linux:
/etc/hosts
- 本地DNS服务器
比如运营商DNS:
8.8.8.8
- 根域名服务器
找：
.com
- 顶级域服务器
找：
- 权威DNS
返回最终IP。
四. 建立TCP连接（三次握手）
HTTP基于TCP.
客户端和服务器建立连接：
第一次握手
客户端给服务器发
SYN
意思：
我要连接你
状态：
SYN_SENT
第二次握手
服务器回复：
SYN + ACK
意思：
收到，我也要向你发起连接
状态：
SYN_RCVD
第三次 握手
客户端回复：
ACK
建立连接。
状态：
ESTABLISHED
五. HTTPS还要TLS握手
流程：
1.Client Hello
客户端发：
支持：
- TLS版本
- 加密套件
- 随机数
2.Sever Hello
服务器返回：
- 证书
- 公钥
- 随机数
3.验证证书
浏览器验证：
CA是否合法。
4.生成对称密钥
客户端生成：
pre-master key
用公钥加密发给服务器
5.双方生成会话密钥
以后通信同：
对称加密
六. 浏览器发送HTTP请求
开始发请求：
例如：
GET / HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
User-Agent: Chrome
Cookie: xxx
Accept: text/html
请求行
GET / HTTP/1.1
包括：
- 请求方法
- 资源路径
- 协议版本
请求头
比如：
Host
Cookie
User-Agent
Accept
Connection
请求体（POST才有）
七. HTTP请求的TCP/IP封装
HTTP数据向下封装
应用层
HTTP报文：
GET /index.html
传输层（TCP）
加TCP头：
源端口
目的端口
序号
确认序号
形成：
TCP报文段
网络层（IP）
加IP头：
源IP
目的IP
形成：
IP数据报
数据链路层（MAC）
加MAC头：
源MAC
目的MAC
这里的目的MAC是下一跳的MAC地址
八. ARP获取MAC地址
如果不知道网关MAC
发送ARP:
谁是网关？
网关回复
我是
拿到：
网关MAC
九. 数据经过网络传输
路径：
客户端 -> 交换机 -> 路由器 -> 运营商网络 -> 目标服务器
每经过一个路由器，都需要重新封装MAC,IP不变。
十. 服务器接收请求
解包：
链路层：去MAC头
网络层：去IP头
传输层：去TCP头
应用层：得到HTTP请求
十一. 服务器处理请求
Web服务器处理：
比如：Nginx Apache HTTP Server
处理流程：
路由匹配
比如：
/
找到处理函数
调业务逻辑
比如：
- 登陆
- 查数据库
- 查缓存
查询数据库
例如：
MySQL
Redis
获取数据。
生成响应
生成：
HTML / JSON
十二. 服务器返回HTTP响应
例如：
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1000
<html>...</html>
包括：
状态行
200 OK
响应头
Content-Type
Set-Cookie
Cache-Control
响应体
HTML内容
十三. 浏览器接收响应
- 浏览器解析状态码
- 处理响应头
十四. 解析HTML(构建DOM)
浏览器渲染开始：
HTML:
<html>
<body>
<div>Hello</div>
</body>
</html>
构建DOM树
十五. 解析CSS(构建CSSOM)
下载：
<link href="style.css">
构建CSSOM树
十六. 执行JS
下载：
<script src="app.js">
十七. 构建渲染树
合并：
DOM + CSSOM
形成：
Rander Tree
十八. Layout(回流)
计算元素位置
十九. Paint（重绘）
绘制像素
比如：
- 颜色
- 边框
- 阴影
二十.显示页面
页面展示完成。
用户看到网页。
二十一. 连接关闭（四次挥手）
如果不是长连接，则断开TCP
客户端给服务端发送：
FIN
服务端给客户端回复：
ACK
服务端给客户端发送：
FIN
客户端给服务端回复
ACK