从浏览器输入网址到展示网页，整个过程可以分解为以下详细步骤：

1. 网址输入：用户在浏览器的地址栏中输入URL（统一资源定位符）。

2. URL解析：浏览器解析URL以确定要使用的协议（如HTTP或HTTPS）、服务器地址和路径。

3. DNS解析：

• 浏览器检查缓存中是否有该URL的IP地址记录。

• 如果没找到，浏览器会发起一个DNS查询去将域名转换为可用的IP地址。

• DNS查询可能涉及联系本地DNS缓存、ISP的DNS服务器，甚至是顶级域名服务器。

4. 建立连接：

• 浏览器通过网络向目标IP地址发起TCP三次握手来建立一个TCP连接。

• 对于HTTPS，此时还会进行TLS/SSL握手来建立安全的加密通道。

5. 发送HTTP请求：

• 浏览器构造一个HTTP请求消息，包含请求方法（如GET或POST）、路径和版本号等，并添加必要的HTTP头信息。

• 请求被发送到服务器。

6. 服务器处理请求：

• 服务器接收到请求并解读。

• 服务器上的服务程序（如Apache、Nginx）响应请求，可能涉及后端语言（PHP、Python等）对数据进行处理。

7. 发送HTTP响应：

• 服务器发送一个HTTP响应消息回浏览器，包含状态码、内容类型（MIME Type）、内容长度、实际请求的数据和其他头信息。

• 对于动态内容，服务器可能会与数据库交互来构建HTML。

8. 关闭或保持连接：

• HTTP/1.1默认情况下会尝试复用连接（Keep-Alive）。

• HTTP/2支持在同一连接上多路复用请求。

9. 浏览器处理响应：

• 浏览器检查状态码，如200表示成功。

• 解析响应头，设置如编码、CORS策略等。

• 开始解析HTML文档。

10. 构建DOM树：

• 浏览器逐行解析HTML，构建DOM树。

• 遇到外部链接的标签（如link或script），浏览器可能会发起新的HTTP请求加载这些资源。

11. 构建CSSOM树：

• 并行于DOM树的构建，浏览器解析所有CSS样式，形成CSSOM树。

12. 执行JavaScript：

• 如果HTML文档中包含JavaScript代码，浏览器会按序解析并执行它们。

• JavaScript可能会修改DOM和CSSOM树。

13. 构建渲染树：

• 一旦DOM和CSSOM都准备好了，浏览器将它们合并成渲染树。

• 渲染树只包含页面需要显示的节点和其样式信息。

14. 布局（Reflow）：

• 浏览器计算渲染树中每个节点的准确位置和大小。

15. 绘制（Painting）：

• 浏览器在屏幕上绘制内容，包括文本、颜色、图像等元素。

16. 合成（Compositing）：

• 如果页面包含层叠的复杂元素，浏览器会进行合成层的操作，优化性能。

17. 加载子资源：

• 图片、视频、字体等额外资源继续被下载并处理。

18. 进一步交互：

• 用户可以开始与页面交互，而随着用户的交互，可能会触发JavaScript事件，导致DOM变更，启动新的更新循环。

19. 异步操作：

• 页面可能会进行异步API调用（如Ajax），以获取额外数据并更新页面内容，而不重新加载整个页面。

本篇文章来源于微信公众号: 互联网面试小帮手