计算机网络和浏览器专题总结（持续更新）

一、页面打开过程中 OSI 七层模型的极简描述：

1. 物理层：通过物理介质传输电、光等信号。
2. 数据链路层：将信号转为数据帧并添加 MAC 地址等信息在局域网传输。
3. 网络层：根据 IP 地址确定数据传输路径，由路由器转发数据。
4. 传输层：用 TCP 或 UDP 协议实现端到端数据传输，建立连接并确保数据可靠送达。
5. 会话层：建立和管理用户设备与服务器间的会话，协调通信参数。
6. 表示层：对数据进行加密解密、压缩解压缩等处理。
7. 应用层：通过 HTTP 等协议收发数据，浏览器解析渲染网页并处理用户交互。

二、TCP 三次握手和四次挥手：

三次握手：

• 客户端 发SYN包 进入 SYN-SENT
• 服务端 发SYN-ACK包 进入 SYN-RECEIVED
• 客户端 发ACK包 双方进入 ESTABLISHED

四次挥手：

• 客户端 发FIN包 进入 FIN-WAIT-1
• 服务端 发ACK包 进入 CLOSE-WAIT & 客户端 收ACK包 进入 FIN-WAIT-2
• 服务端 发FIN包 进入 LAST-ACK
• 客户端 收FIN包 & 发ACK包 进入 TIME-WAIT & 服务端收ACK包 关闭连接（客户端等待等待 2MSL后关闭连接，MSL是最长报文段寿命，通常30秒至2分钟）

三、从浏览器输入 url 到页面渲染的过程

从输入 URL 到服务器的第一个字节传输回来（TTFB）经历：

• DNS 解析、建立连接（含 TCP 及 SSL/TLS 握手）、请求发送、服务器处理、数据传输。

1. DNS 解析：解析域名至 IP 地址（含本地缓存查询、递归查询）。
2. 建立连接：
   • TCP 三次握手（确保可靠传输）。
   • SSL/TLS 握手（HTTPS 场景，包括证书验证和密钥交换）。
3. 请求发送：客户端发送 HTTP 请求（如 GET /index.html）。
4. 服务器处理：
   • 反向代理路由转发（如 Nginx 负载均衡）。
   • 业务逻辑执行（如数据库查询、动态页面生成）。
5. 数据传输开始：服务器返回响应头及第一个字节（TTFB 结束）。

从数据开始接收（TTFB）到页面第一个实质性内容渲染（FCP）经历：

• 渐进式解析与资源加载、JS处理和执行（defer 和 async）、渲染树构建、计算布局并绘制成像素。

1. 渐进式解析与资源加载：
   • DOM 树构建：c，遇到阻塞资源（如未标记 async/defer 的 JS）时暂停。
   • CSSOM 树构建：解析 CSS（外部 CSS 文件阻塞渲染树生成）。
   • 预加载扫描器：提前加载后续资源（如 <img>、<link rel="stylesheet">）。
2. JS 处理：
   • 同步脚本：阻塞 DOM/CSSOM 构建。
   • async/defer：异步加载或延迟执行。
3. 渲染树构建：合并 DOM 和 CSSOM，排除不可见节点（如 <script>、<meta>）。
4. 布局与绘制：
   • 布局计算（Layout） ：计算元素几何信息（位置、尺寸）。
   • 分层与合成（Compositing） ：将页面划分为独立图层（如 GPU 加速）。
   • 栅格化（Rasterization） ：将图层转换为位图。
   • 绘制（Paint） ：输出像素到屏幕，触发 FCP。