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

当我们在浏览器中键入一个网址并按下回车键直到网页显示出来，这期间发生了一系列复杂的过程。我们可以将这一过程分为几个主要阶段：DNS解析、TCP连接、HTTP请求与响应、页面渲染和执行。这些阶段中的每一个都涉及多个步骤和技术细节。

1. DNS解析

当我们键入一个网址（如www.example.com），浏览器首先需要将这个人类可读的域名转换成计算机可以理解的IP地址。这一过程称为DNS解析。

• 浏览器缓存：首先浏览器会检查本地缓存是否有这个域名的IP地址记录。
• 操作系统缓存：如果浏览器缓存中没有找到，它会查询操作系统的DNS缓存。
• 路由器缓存：如果操作系统缓存中也没有，查询请求会发送到本地网络的路由器，检查其缓存。
• ISP的DNS服务器：如果路由器缓存中没有记录，请求会发送到ISP的DNS服务器。
• 递归查询：如果ISP的DNS服务器没有找到，查询请求会进行递归查询，逐级查询更高级别的DNS服务器，直到找到域名对应的IP地址。

2. TCP连接

一旦获取到IP地址，浏览器会通过TCP协议与目标服务器建立连接。这一过程包含三次握手：

• 第一次握手：浏览器发送一个带有SYN（synchronize）标志的数据包到服务器，表示请求建立连接。
• 第二次握手：服务器收到SYN包后，回复一个带有SYN和ACK（acknowledge）标志的数据包，表示同意建立连接。
• 第三次握手：浏览器收到服务器的SYN+ACK包后，再发送一个ACK包，确认连接建立。

3. 发送HTTP请求

TCP连接建立后，浏览器通过这个连接发送一个HTTP请求到服务器。HTTP请求包含以下部分：

• 请求行：包括请求方法（如GET、POST）、请求URI和HTTP版本。
• 请求头：包括主机（Host）、用户代理（User-Agent）、接受的内容类型等信息。
• 请求体：在POST请求中，包含提交的数据。

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

服务器收到HTTP请求后，进行以下处理：

• 请求解析：服务器解析请求行、请求头和请求体。
• 资源定位：根据请求URI定位所请求的资源（如文件、数据）。
• 业务逻辑处理：如果请求需要处理动态内容，服务器会执行相应的业务逻辑（如查询数据库、执行程序）。
• 生成响应：服务器生成HTTP响应，包括状态行、响应头和响应体，状态行包括状态码（如200、404）、状态文本（OK、Not Found）。
• 发送响应：服务器将响应通过TCP连接发送回浏览器。

5. 浏览器接收响应并渲染页面

浏览器收到HTTP响应后，进行以下处理：

• 解析HTML：解析响应体中的HTML内容，构建DOM树。
• 解析CSS：解析CSS文件和内联样式，构建CSSOM树（CSS对象模型树）。
• 构建渲染树：根据DOM树和CSSOM树，构建渲染树，决定各个元素的样式和布局。
• 布局计算：计算各个元素的大小和位置。
• 绘制：将元素绘制到屏幕上。

6. 执行JavaScript

在解析HTML过程中，浏览器会遇到JavaScript脚本，并按顺序执行这些脚本：

• 阻塞解析：JavaScript的执行会阻塞HTML的解析，因此浏览器会先下载并执行JavaScript文件，再继续解析HTML。
• DOM操作：JavaScript脚本可以操作DOM，修改页面内容和结构。
• 事件处理：JavaScript脚本可以注册事件处理器，响应用户交互（如点击、输入）。

7. 加载外部资源

HTML文档可能包含引用的外部资源，如图片、视频、音频、字体等。浏览器会根据HTML文档的内容，发起额外的HTTP请求来加载这些资源，并将其显示在页面中。

8. 页面显示与用户交互

所有资源加载完成后，页面会完整显示在浏览器窗口中，用户可以与页面进行交互（如点击按钮、填写表单），浏览器会响应这些交互，执行相应的JavaScript代码，动态更新页面内容。