1. 输入URL和DNS解析
-
输入URL：用户在浏览器地址栏输入一个URL（如
https://www.example.com）。 -
DNS解析：
- 浏览器首先查看本地DNS缓存，寻找该域名的IP地址。
- 如果没有找到，浏览器向配置的DNS服务器发送请求，DNS服务器查找该域名并返回对应的IP地址。
2. 建立TCP连接
-
三次握手（建立连接）：
- 第一步：客户端发送一个SYN包（请求建立连接）到服务器。
- 第二步：服务器回应一个SYN-ACK包（确认收到请求）。
- 第三步：客户端发送一个ACK包，表示连接建立成功。此时，TCP连接进入“ESTABLISHED”状态。
3. 发送HTTP请求
- 客户端（浏览器）通过已建立的TCP连接发送HTTP请求，请求特定的资源（如HTML页面）。
- HTTP请求中包含请求头，提供浏览器类型、支持的编码、语言等信息。
4. 服务器处理请求
-
服务器接收到HTTP请求后，根据请求的类型进行处理：
- 静态内容：如果请求的是静态文件（如HTML、CSS、图像），服务器直接返回这些文件。
- 动态内容：如果请求的是动态生成的内容，服务器执行后台程序（如PHP、Python等），查询数据库并生成相应的HTML。
5. 返回HTTP响应
-
服务器将处理结果打包成HTTP响应，包含：
- 状态码：如200（成功）、404（未找到）等。
- 响应头：包含内容类型、内容长度、缓存信息等。
- 响应体：实际请求的内容（如HTML文档）。
6. 浏览器渲染页面
-
浏览器接收到HTTP响应后，开始解析HTML文档：
- 解析HTML构建DOM（文档对象模型）和解析生成CSS规则树CSSCSSOM（CSS对象模型）。
- 合并DOM和CSSOM生成渲染树render树，决定每个元素的显示样式和顺序。
- 布局render树（Layout/reflow）负责各元素尺寸、位置的计算
- 绘制render树（paint），绘制页面像素信息
- 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上
7. 加载其他资源
- 如果HTML中引用了其他资源（如CSS文件、JavaScript文件、图片等），浏览器会发起额外的HTTP请求来获取这些资源。
- 浏览器通常会并行加载这些资源，以提高加载速度。
8. 执行JavaScript
- 当JavaScript文件加载完成后，浏览器会执行其中的脚本，可能会修改DOM、添加交互效果或进行异步请求（如AJAX）。
9. 完成渲染
- 浏览器最终将渲染树绘制到屏幕上，用户可以看到完整的网页。
10. 连接关闭（四次挥手）
- 当一方（例如客户端）决定关闭连接时，它会发送一个FIN包，表示不再发送数据。
- 服务器接收到这个FIN包后，发送一个ACK包，确认收到关闭请求。此时，客户端进入“FIN_WAIT_2”状态。
- 服务器在完成数据传输后，也会发送一个FIN包，表示它也准备关闭连接。
- 客户端接收到这个FIN包后，发送一个ACK包确认。此时，连接正式关闭，双方进入“TIME_WAIT”状态，确保最后的ACK包能够被接收，随后连接彻底关闭。
