键入网址到网页显示，期间发生了什么？

从输入 URL 到页面加载完成，发生了什么？

1. 输入 URL

当在浏览器地址栏输入 URL（如 https://www.baidu.com）并按下回车键时，整个过程就开始了。

2. DNS 解析

2.1 检查浏览器缓存

浏览器首先检查自身的 DNS 缓存，看是否存有该域名对应的 IP 地址。

2.2 检查操作系统缓存

如果浏览器缓存中没有，会检查操作系统的 hosts 文件和 DNS 缓存。

2.3 路由器缓存

若前两步未找到，会向路由器发送 DNS 请求。

2.4 ISP 的 DNS 服务器

如果路由器也没有缓存，请求会被转发到互联网服务提供商（ISP）的 DNS 服务器。

2.5 递归搜索

ISP 的 DNS 服务器会执行递归搜索，从根域名服务器开始，依次查询顶级域名服务器，然后是权威域名服务器，直到找到目标 IP 地址。

3. 建立 TCP 连接

3.1 三次握手

找到 IP 地址后，客户端会与服务器建立 TCP 连接，这个过程叫做三次握手：

1. 客户端发送 SYN 包
2. 服务器回应 SYN-ACK 包
3. 客户端发送 ACK 包

4. 发送 HTTP 请求

建立 TCP 连接后，浏览器会发送 HTTP 请求到服务器。请求包括：

• 请求方法（如 GET）
• 路径
• HTTP 协议版本
• Host 头
• 其他可选的头信息

5. 服务器处理请求并返回响应

5.1 Web 服务器

Web 服务器（如 Nginx、Apache）接收请求。

5.2 应用服务器

对于动态内容，请求可能会被传递给应用服务器（如 PHP、Python、Java 等）处理。

5.3 数据库交互

应用可能需要与数据库交互来获取或存储数据。

5.4 返回 HTTP 响应

服务器生成 HTTP 响应，包括状态码、响应头和响应体（通常是 HTML 内容）。

6. 浏览器渲染页面

6.1 解析 HTML

浏览器开始解析 HTML，构建 DOM（文档对象模型）树。

6.2 解析 CSS

解析 CSS，构建 CSSOM（CSS 对象模型）树。

6.3 构建渲染树

将 DOM 和 CSSOM 组合成渲染树。

6.4 布局

计算每个可见元素的精确位置和大小。

6.5 绘制

将渲染树中的每个节点绘制到屏幕上。

7. 加载额外资源

7.1 JavaScript

解析并执行 JavaScript 代码。

7.2 图片和其他媒体

加载页面中的图片、视频等媒体资源。

7.3 AJAX 请求

可能会发起额外的异步请求来获取更多数据。

8. 页面交互

页面加载完成后，用户可以与页面进行交互，可能触发更多的网络请求和页面更新。

结论

从输入 URL 到页面完全加载是一个复杂的过程，涉及网络、操作系统、Web 服务器、浏览器等多个层面的协作。理解这个过程不仅有助于更好地开发和优化 Web 应用，也能帮助更深入地理解现代互联网的工作原理。

参考资料

• DNS查询过程详解