“从输入 URL 到页面展示这中间发生了什么”这是一道计算机网络与浏览器原理的经典面试题。它看似基础实则深不见底。对于初级开发者可能只需要回答“DNS 解析、建立连接、下载文件、渲染页面”即可但对于高级工程师而言这道题考察的是对网络协议栈、浏览器多进程架构、渲染流水线以及性能优化的系统性理解。本文将剥离表象深入底层以专业的视角还原这一过程的全貌。一、 URL 解析与 DNS 查询1. URL 结构拆解URLUniform Resource Locator统一资源定位符。浏览器首先会对用户输入的字符串进行解析。如果不符合 URL 规则浏览器会将其视为搜索关键字传给默认搜索引擎如果符合规则则拆解为以下部分scheme://host.domain:port/path/filename?query#fragmentScheme: 协议类型HTTP/HTTPS/FTP 等。Host/Domain: 域名如 http://juejin.cn。Port: 端口号HTTP 默认为 80HTTPS 默认为 443。Path: 资源路径。Query: 查询参数。Fragment: 锚点注意锚点不会被发送到服务器。2. DNS 解析流程网络通讯是基于 TCP/IP 协议的是通过 IP 地址而非域名进行定位。因此浏览器的第一步是获取目标服务器的 IP 地址。DNS 查询遵循级联缓存策略查找顺序如下浏览器缓存: 浏览器会检查自身维护的 DNS 缓存。系统缓存: 检查操作系统的 hosts 文件。路由器缓存: 检查路由器的 DNS 记录。ISP DNS 缓存: 也就是本地 DNS 服务器Local DNS通常由网络服务提供商提供。如果上述缓存均未命中则发起递归查询与迭代查询递归查询: 客户端向本地 DNS 服务器发起请求如果本地 DNS 不知道它会作为代理去替客户端查询。迭代查询: 本地 DNS 服务器依次向根域名服务器、顶级域名服务器、权威域名服务器发起请求最终获取 IP 地址并返回给客户端。进阶优化DNS Prefetch: 现代前端通过 提前解析域名减少后续请求的延迟。CDN 负载均衡: 在 DNS 解析阶段智能 DNS 会根据用户的地理位置返回距离用户最近的 CDN 节点 IP而非源站 IP从而实现内容分发加速。二、 TCP 连接与 HTTP 请求拿到 IP 地址后浏览器与服务器建立连接。这是数据传输的基础。1. TCP 三次握手TCPTransmission Control Protocol提供可靠的传输服务。建立连接需要经过三次握手确认双方的收发能力。第一次握手SYN: 客户端发送 SYN1, Seqx。客户端进入 SYN_SEND 状态。此时证明客户端有发送能力。第二次握手SYNACK: 服务端接收报文回复 SYN1, ACK1, seqy, ackx1。服务端进入 SYN_RCVD 状态。此时证明服务端有接收和发送能力。第三次握手ACK: 客户端接收报文回复 ACK1, seqx1, acky1。双方进入 ESTABLISHED 状态。此时证明客户端有接收能力。核心问题为什么是三次而不是两次主要是为了防止已失效的连接请求报文段又传送到了服务端产生错误。如果只有两次握手服务端收到失效的 SYN 包后误以为建立了新连接会一直等待客户端发送数据造成资源浪费。2. TLS/SSL 握手HTTPS如果是 HTTPS 协议在 TCP 建立后还需要进行 TLS 四次握手以协商加密密钥Session Key。过程包括交换支持的加密套件、验证服务器证书、通过非对称加密交换随机数等最终生成对称加密密钥用于后续通信。3. 发送 HTTP 请求连接建立完毕浏览器构建 HTTP 请求报文并发送。请求行: 方法GET/POST、URL、协议版本。请求头: User-Agent、Accept、Cookie 等。请求体: POST 请求携带的数据。服务器处理请求后返回 HTTP 响应报文状态行、响应头、响应体。浏览器拿到响应体通常是 HTML 文件准备开始渲染。三、 浏览器解析与渲染核心重点这是前端工程师最需要关注的环节。现代浏览器采用多进程架构主要包括Browser 进程主控、网络进程和渲染进程。当网络进程下载完 HTML 数据后会通过 IPC 通信将数据交给渲染进程Renderer Process。渲染主流程如下1. 解析 HTML 构建 DOM 树浏览器无法直接理解 HTML 字符串需要将其转化为对象模型DOM。流程Bytes字节流 - Characters字符 - Tokens词法分析 - Nodes节点 - DOM Tree。注意遇到2. 解析 CSS 构建 CSSOM 树浏览器下载 CSS 文件.css并解析为 CSSOMCSS Object Model。关键点CSS 下载不阻塞DOM 树的解析。CSS 下载阻塞Render Tree 的构建因此会阻塞页面渲染。3. 生成渲染树Render TreeDOM 树与 CSSOM 树结合生成 Render Tree。浏览器遍历 DOM 树的根节点在 CSSOM 中找到对应的样式。忽略不可见节点display: none 的节点不会出现在 Render Tree 中但 visibility: hidden 的节点会存在因为它占据空间。去除元数据head、script 等非视觉节点会被去除。4. 布局Layout / Reflow有了 Render Tree浏览器已经知道有哪些节点以及样式但还不知道它们的几何信息位置、大小。布局阶段会从根节点递归计算每个元素在视口中的确切坐标和尺寸。这个过程在技术上被称为Reflow回流。5. 绘制Paint布局确定后浏览器会生成绘制指令列表如“在 x,y 处画一个红色矩形”。这个过程并不直接显示在屏幕上而是生成图层Layer的绘制记录。6. 合成Composite与显示这是现代浏览器渲染优化的核心。分层浏览器会将页面分为不同的图层Layer。拥有 transform (3D)、will-change、position: fixed 等属性的元素会被提升为单独的合成层。光栅化Raster合成线程将图层切分为图块Tile并发送给 GPU 进行光栅化生成位图。显示一旦所有图块都被光栅化浏览器会生成一个 DrawQuad 命令提交给 GPU 进程最终将像素显示在屏幕上。脚本阻塞与优化为了避免 JS 阻塞 DOM 构建可以使用 defer 和 asyncdefer: 异步下载文档解析完成后、DOMContentLoaded 事件前按照顺序执行。async: 异步下载下载完成后立即执行可能打断 HTML 解析执行顺序不固定。四、 连接断开当页面资源加载完毕且不再需要通信时通过TCP 四次挥手断开连接。第一次挥手FIN: 主动方发送 FIN进入 FIN_WAIT_1。第二次挥手ACK: 被动方发送 ACK进入 CLOSE_WAIT。主动方进入 FIN_WAIT_2。此时连接处于半关闭状态。第三次挥手FIN: 被动方数据发送完毕发送 FIN进入 LAST_ACK。第四次挥手ACK: 主动方发送 ACK进入 TIME_WAIT。等待 2MSL报文最大生存时间后释放连接。为什么需要 TIME_WAIT确保被动方收到了最后的 ACK。如果 ACK 丢失被动方重传 FIN主动方还能在 2MSL 内响应。五、 面试高分指南场景模拟场景面试官问“请详细描述从输入 URL 到页面展示发生了什么”回答策略范本1. 总述宏观骨架“这个过程主要分为两个阶段网络通信阶段和页面渲染阶段。网络阶段负责将 URL 转换为 IP 并获取资源渲染阶段负责将 HTML 代码转化为像素点。”2. 网络通信阶段突出细节“首先是DNS 解析。浏览器会依次查询浏览器缓存、系统 hosts、路由器缓存最后发起递归或迭代查询拿到 IP。这里可以提到CDN是如何通过 DNS 实现就近访问的。”“拿到 IP 后进行TCP 三次握手建立连接。如果是 HTTPS还涉及 TLS 握手协商密钥。”“连接建立后发送 HTTP 请求。需要注意HTTP/1.1 的 Keep-Alive可以复用 TCP 连接而HTTP/2更是通过多路复用解决了队头阻塞问题。”3. 页面渲染阶段展示深度“浏览器解析 HTML 构建 DOM 树解析 CSS 构建 CSSOM 树两者合并生成Render Tree。”“接着进行Layout回流计算位置大小然后进行Paint重绘生成绘制指令。”“这里有一个关键点是Composite合成。现代浏览器会利用 GPU 加速将 transform 或 opacity 的元素提升为独立图层。修改这些属性不会触发 Reflow 和 Repaint只会触发 Composite这是性能优化的核心。”4. 脚本执行补充“在解析过程中遇到 JS 会阻塞 DOM 构建。为了优化首屏我们通常使用 defer 属性让脚本异步加载并在 HTML 解析完成后执行。”总结“整个流程结束于 TCP 四次挥手断开连接。这就构成了一个完整的浏览闭环。”