前端面试八股文：从输入 URL 到页面呈现的过程

2023-06-27 16:10:32 浏览数 (1984)

在日常工作中，我们经常需要与浏览器打交道。而对于前端开发人员来说，了解从输入 URL 到页面呈现的过程是非常重要的。因为这些知识点不仅涉及到我们的开发效率和工作质量，还能够帮助我们更好地理解浏览器内部的工作原理。

下面，我们将结合具体实例，分步介绍从输入 URL 到页面呈现的过程。

1. DNS 解析

当我们在浏览器中输入一个 URL，浏览器首先会进行 DNS 解析，将域名（比如 www.example.com）转换为 IP 地址。这一步通常由本地 DNS 服务器完成。

例如，假设我们想访问谷歌的官方网站，我们在浏览器地址栏中输入 www.google.com，然后按下回车键，浏览器就会向本地 DNS 服务器发出请求，请求解析该域名对应的 IP 地址。本地 DNS 服务器会根据自己的缓存或者向其他 DNS 服务器发出递归查询来返回最终的 IP 地址。如果找不到该域名对应的 IP 地址，就会返回一个错误信息。

2. 建立 TCP 连接

一旦浏览器得到了正确的 IP 地址，它就会尝试建立一个与服务器的 TCP 连接。在建立连接之前，浏览器需要通过三次握手协议与服务器进行通信确认。TCP 是一个面向连接的协议，因此在双方建立连接之后，就可以开始传输数据了。

3. 发送 HTTP 请求

当浏览器和服务器建立起 TCP 连接之后，浏览器就会向服务器发送一个 HTTP 请求，请求访问指定的资源。HTTP 是应用层协议，主要用于客户端和服务器之间的通信。请求消息包括请求方式（GET、POST 等）、URL 路径、HTTP 版本号、请求头等信息。

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

当服务器接收到浏览器发送过来的请求之后，就会根据请求的内容进行相关的处理，并生成对应的响应。响应消息包括响应状态码、响应头、响应体等信息。其中，响应状态码表示服务器对请求的处理结果，比如常见的 200 表示“请求成功”，404 表示“请求的资源不存在”，500 表示“服务器内部错误”等。

5. 浏览器解析渲染页面

当浏览器接收到服务器返回的响应之后，它会对响应进行解析，并根据 HTML、CSS 和 JavaScript 等资源构建文档对象模型（DOM）、渲染树和 JavaScript 引擎等。最终，浏览器会将这些对象组合起来，把页面呈现给用户。