【前端】面试八股文——输入URL到页面展示的过程

【前端】面试八股文——输入URL到页面展示的过程

1. DNS解析

当用户在浏览器中输入URL并按下回车时，首先需要将域名转换为IP地址，这个过程称为DNS（域名系统）解析。具体步骤如下：

• 浏览器缓存：浏览器首先检查自身缓存中是否有该域名的IP地址。
• 操作系统缓存：如果浏览器缓存中没有找到，浏览器会向操作系统请求DNS信息。
• 路由器缓存：如果操作系统缓存也没有找到，操作系统会向本地网络中的路由器请求DNS信息。
• ISP DNS服务器：如果路由器缓存没有命中，路由器会向ISP提供的DNS服务器请求域名解析。
• 递归查询：如果ISP的DNS服务器也没有找到，它会进行递归查询，从根DNS服务器开始，逐级查询顶级域（如.com）、二级域等，直到找到对应的IP地址。

2. TCP连接

获得IP地址后，浏览器需要与服务器建立连接，这通常通过三次握手完成：

• 第一次握手：浏览器（客户端）发送一个带有SYN标志的数据包到服务器，表示请求建立连接。
• 第二次握手：服务器收到SYN数据包后，回复一个带有SYN/ACK标志的数据包，表示同意建立连接。
• 第三次握手：客户端收到SYN/ACK数据包后，再回复一个带有ACK标志的数据包，连接建立完成。

3. 发送HTTP请求

TCP连接建立后，浏览器会构建一个HTTP请求报文并发送到服务器：

• 请求行：包含请求方法（如GET、POST）、URL和HTTP版本。
• 请求头：包含主机、用户代理、接受的文件类型等信息。
• 请求体：对于GET请求通常为空，对于POST请求包含提交的数据。

4. 服务器处理请求

服务器接收到HTTP请求后，会进行以下操作：

• 请求解析：解析请求报文，提取请求的资源路径和其他信息。
• 资源查找：根据请求路径查找对应的资源（如HTML文件、图像等）。
• 生成响应：将查找到的资源封装到HTTP响应报文中，准备返回给客户端。

5. 浏览器接收响应

浏览器接收服务器的响应报文，并进行解析：

• 状态行：包含HTTP版本、状态码（如200、404）和状态描述。
• 响应头：包含内容类型、内容长度、服务器信息等。
• 响应体：包含实际的资源内容（如HTML、CSS、JavaScript等）。

6. 渲染页面

浏览器根据响应内容开始渲染页面，步骤如下：

• 解析HTML：浏览器解析HTML文件，构建DOM树。
• 解析CSS：解析CSS文件，构建CSSOM树。
• 构建渲染树：将DOM树和CSSOM树合并，生成渲染树。
• 布局（layout）：计算每个元素的大小和位置。
• 绘制（painting）：将渲染树中的元素绘制到屏幕上。

7. 执行JavaScript

浏览器解析并执行HTML中的JavaScript：

• 解析脚本：浏览器解析并执行内嵌的或外部引用的JavaScript。
• 操作DOM：JavaScript可能会操作DOM，改变页面内容。
• 重新渲染：如果JavaScript修改了DOM，浏览器可能会重新计算布局和绘制页面。

8. 加载其他资源

HTML文件中可能引用了其他资源（如图片、视频、字体等），浏览器会根据需要加载这些资源：

• 并行加载：浏览器可以并行发送多个HTTP请求以加快资源加载速度。
• 处理响应：每个资源的加载过程与主HTML文件类似，会经过DNS解析、TCP连接、HTTP请求和响应处理等步骤。

9. 建立安全连接（HTTPS）

如果使用HTTPS，浏览器在建立TCP连接后会进行SSL/TLS握手，以建立加密通道：

• 协商加密算法：客户端和服务器协商使用的加密算法。
• 交换密钥：客户端和服务器交换密钥，建立加密通信通道。
• 验证证书：客户端验证服务器的SSL证书是否有效。

10. 优化性能

浏览器会进行一些性能优化，以提高页面加载速度和用户体验：

• 缓存：缓存常用资源以减少重复加载。
• 预加载：提前加载可能用到的资源。
• 压缩：对资源进行压缩以减少传输的数据量。
• 使用HTTP/2：HTTP/2支持多路复用、头部压缩等特性，提高传输效率。

通过这些详细的步骤，输入URL到页面完全展示的整个过程得以实现。理解这个过程不仅有助于提升前端开发的技术水平，也有助于优化页面加载速度，提高用户体验。