揭秘浏览器幕后：地址栏输入 URL 后发生的一切

2023-09-07 12:17:29

前言

“在浏览器里输入 URL 到页面展示，这中间发生了什么？”这是一道经典的面试题，能较为全面的考察应聘者知识掌握层度的，身为一个前端工程师，浏览器是我们平时打交道最多的地方，也是我们应该了解的地方，其内部实现原理更是需要我们深入钻研的。

浏览器地址栏之旅

1. DNS 解析

当你在浏览器地址栏中输入一个 URL 时，浏览器首先会进行 DNS 解析。DNS 是域名系统 (Domain Name System) 的缩写，它将域名（如 "www.example.com"）转换为相应的 IP 地址 (如 "192.0.1.1")。此过程类似于电话簿，将人名转换成电话号码。DNS 解析通常由你的电脑或网络路由器上的本地 DNS 服务器完成。如果本地 DNS 服务器没有缓存该域名对应的 IP 地址，它将向权威 DNS 服务器查询，并将其添加到本地缓存中以备将来使用。

2. TCP 连接

DNS 解析完成后，浏览器会与目标服务器建立 TCP 连接。TCP 是传输控制协议 (Transmission Control Protocol) 的缩写，它是一种可靠的传输协议，可确保数据在网络上可靠地传输。浏览器使用 TCP 连接来与目标服务器交换数据，如 HTML、CSS、JavaScript 和图像等。

3. HTTP 请求

浏览器通过 TCP 连接向目标服务器发送 HTTP 请求。HTTP 是超文本传输协议 (Hypertext Transfer Protocol) 的缩写，它是一种用于在网络上传输数据的协议。HTTP 请求通常包含以下信息：

请求方法 (如 GET、POST、PUT、DELETE)
请求 URL
HTTP 协议版本
请求头（如 Host、User-Agent、Accept）
请求正文（如果请求方法为 POST、PUT 或 DELETE）

4. 服务器响应

目标服务器收到 HTTP 请求后，会对其进行处理并返回一个 HTTP 响应。HTTP 响应通常包含以下信息：

响应状态码 (如 200、404、500)
响应头（如 Content-Type、Content-Length）
响应正文（如 HTML、CSS、JavaScript 和图像等）

5. HTML 解析

浏览器收到 HTTP 响应后，会对 HTML 文档进行解析。HTML 是超文本标记语言 (Hypertext Markup Language) 的缩写，它是一种用于创建网页的标记语言。浏览器会根据 HTML 文档的结构和内容构建一个 DOM 树 (Document Object Model)。DOM 树是一个表示 HTML 文档结构的数据结构，其中每个节点代表一个 HTML 元素。