浏览器输入 URL 到页面渲染经历哪些步骤？｜高频面试题解析

60 秒回答模板

用户在地址栏输入 URL 并回车后，浏览器首先会解析 URL，补全协议、主机、端口、路径，并判断是搜索词、普通导航还是特殊协议。随后浏览器主进程发起一次导航请求，先检查强缓存、协商缓存、预加载状态以及是否有 Service Worker 可以接管。如果需要网络请求，会进行 DNS 解析，得到目标 IP，可能命中浏览器、系统、路由器或运营商 DNS 缓存。接着建立连接，HTTP/1.1 通常依赖 TCP，HTTPS 还需要 TLS 握手；HTTP/2、HTTP/3 会影响连接复用和传输方式。请求到达 CDN 或源站后，服务端返回 HTML、状态码、响应头和内容。浏览器接收响应后根据 MIME、状态码、CSP、缓存头等决定如何处理，渲染进程开始流式解析 HTML，构建 DOM；遇到 CSS 构建 CSSOM，遇到脚本则根据 defer、async、module 等规则执行或阻塞解析。DOM 和 CSSOM 合成渲染树，之后计算样式、布局、绘制、分层和合成，最终显示到屏幕。页面渲染过程中还会并发加载图片、字体、脚本、样式等子资源，并通过预加载扫描器、优先级调度和缓存减少阻塞。最后可以用 FCP、LCP、DOMContentLoaded、load、TTFB、INP、CLS 等指标评估这条链路中的关键性能瓶颈。

考点 URL 解析

主线 导航调度

易错点 只背 DNS、TCP、HTTP、渲染四个词，没有解释浏…

深入解析

URL 解析

浏览器会先判断输入内容是否是合法 URL，还是需要交给默认搜索引擎处理。对于合法地址，会解析出协议、主机名、端口、路径、查询参数和片段标识。协议决定后续处理方式，例如普通网页导航、文件协议、自定义协议或安全上下文。若用户省略协议，浏览器可能根据历史记录、HSTS、默认策略补全为 HTTPS。片段标识通常不会发送给服务端，只影响客户端定位。

导航调度

地址确认后，浏览器主进程会创建或复用页面导航任务，并协调 UI 进程、网络进程和渲染进程。它会判断这次导航是否属于当前页面内跳转、跨文档导航、同站导航或跨站导航。跨站导航可能触发渲染进程隔离，保证站点之间的安全边界。此阶段还会处理历史记录、重定向策略、下载判断、混合内容拦截和权限策略。

缓存与 Service Worker

真正访问网络前，浏览器会检查 HTTP 缓存。强缓存有效时可以直接使用本地副本；强缓存失效时可能通过 ETag 或 Last-Modified 发起协商缓存，服务端返回未修改时复用本地资源。若页面注册了 Service Worker，并且请求处于其作用域内，Service Worker 可以拦截导航请求，选择返回缓存、发起网络请求或合成响应。这一层经常影响离线可用性、首屏速度和调试复杂度。

DNS 解析

当需要访问网络且没有可复用连接时，浏览器要将域名解析为 IP 地址。解析顺序通常涉及浏览器 DNS 缓存、系统缓存、本地 hosts、递归 DNS、权威 DNS 等环节。DNS 结果可能包含多个 IP，用于负载均衡、就近调度或容灾。现代浏览器还可能使用 DNS 预解析减少等待时间；若启用安全 DNS，查询过程本身也可能经过加密传输。

连接建立

拿到 IP 后，浏览器会建立传输连接。HTTP/1.1 和 HTTP/2 通常基于 TCP，TCP 需要三次握手；HTTPS 还要进行 TLS 握手，完成证书校验、密钥协商和安全通道建立。HTTP/2 支持多路复用，多个请求可以共享同一条连接；HTTP/3 基于 QUIC，运行在 UDP 之上，目标是降低握手和队头阻塞成本。连接是否复用会直接影响首包时间和资源加载效率。

HTTP 请求

连接可用后，浏览器发送 HTTP 请求，包含请求方法、路径、Host、Cookie、User-Agent、Accept、缓存相关头、压缩能力和安全上下文信息。请求可能经过代理、网关、CDN 边缘节点或负载均衡器。若服务端返回重定向，浏览器会根据状态码和 Location 发起新的导航请求，并重新评估缓存、协议升级、跨域和安全策略。

CDN 与服务端响应

请求到达 CDN 时，边缘节点可能直接命中缓存并返回资源，也可能回源获取最新内容。源站通常会经过网关、应用服务、数据库、模板渲染或接口聚合后生成响应。响应包括状态码、响应头和响应体。响应头中的 Content-Type、Cache-Control、Set-Cookie、Content-Encoding、CSP、Referrer-Policy 等会影响浏览器的解析、安全、缓存和后续请求行为。

HTML 解析

浏览器收到 HTML 后不必等待完整文档下载完成，而是可以流式解析。解析器会把字节流按编码转换为字符，再进行词法分析生成 token，逐步构建 DOM 树。解析过程中遇到外部样式表、脚本、图片、字体等资源，会触发子资源加载。浏览器还有预加载扫描器，可以在主解析器被脚本阻塞时提前发现并请求关键资源。

CSSOM 与脚本执行

CSS 会被解析成 CSSOM，DOM 和 CSSOM 都是渲染所需的关键结构。普通同步脚本会阻塞 HTML 解析，因为脚本可能通过 document.write 或 DOM API 修改文档结构；外部脚本还可能等待已经发现的阻塞样式表加载完成后再执行。defer 脚本延后到 DOM 构建完成后按顺序执行，async 脚本下载完成后尽快执行且不保证顺序，module 脚本默认具有延迟执行特性并支持依赖图加载。

资源加载

页面渲染不只依赖主文档，还包括 CSS、JS、图片、字体、音视频、接口请求等。浏览器会根据资源类型、发现时机、是否阻塞渲染、是否在首屏附近等因素分配优先级。preload、prefetch、preconnect、dns-prefetch 可以提示浏览器提前准备资源或连接，但滥用会抢占带宽。图片懒加载、字体展示策略、代码分包和关键 CSS 内联都会影响首屏和交互性能。

渲染流水线

当 DOM 和 CSSOM 具备足够信息后，浏览器会计算每个元素的最终样式，生成渲染树，排除 display 为 none 的节点，并保留可见内容。随后进行布局，计算元素几何位置和尺寸；再进行绘制，生成绘制指令；接着根据 transform、opacity、position、will-change、视频、canvas 等因素进行分层，最后由合成线程把图层合成为最终帧。重排、重绘和合成的成本不同，性能优化要尽量减少布局抖动和主线程长任务。

易错点

只背 DNS、TCP、HTTP、渲染四个词，没有解释浏览器导航调度和缓存判断。
把输入 URL 后的所有请求都说成一定会访问服务器，忽略强缓存、Service Worker 和 CDN 命中。
认为 HTTPS 只是 HTTP 加密，没有提到 TLS 握手、证书校验和密钥协商。
把 DOMContentLoaded 和 load 混为一谈，无法说明它们对应的页面阶段。
说 JS 一定阻塞渲染，却不区分普通脚本、defer、async 和 module。
只说 DOM 树生成页面，没有补充 CSSOM、渲染树、布局、绘制、分层、合成。
忽略预加载扫描器和资源优先级，无法解释为什么标签位置会影响加载瀑布。
把重排、重绘、合成当成同一个概念，无法说明不同 CSS 属性的性能代价。

面试官追问

为什么 CSS 会阻塞渲染，但通常不阻塞 DOM 构建？

DOM 构建只需要 HTML 结构，CSS 不改变 DOM 节点本身，所以一般不阻塞 DOM 解析。但渲染需要 DOM 和 CSSOM 共同决定元素样式，CSSOM 未完成时浏览器无法可靠计算最终样式，因此会阻塞首次渲染。

普通 script、defer、async 的区别是什么？

普通 script 会在解析到时暂停 HTML 解析，下载并执行完成后再继续。defer 不阻塞 DOM 解析，等文档解析完成后按出现顺序执行。async 也不阻塞解析，但下载完成后尽快执行，不保证执行顺序，适合独立脚本。

Service Worker 在这个流程中处于什么位置？

Service Worker 位于页面请求和网络之间。如果请求命中它的作用域，它可以拦截导航和子资源请求，决定返回缓存、访问网络或构造响应。因此它可能让页面离线可用，也可能导致缓存更新策略变复杂。

HTTP/2 为什么能提升页面加载性能？

HTTP/2 支持在单个连接上并发传输多个请求和响应，减少 HTTP/1.1 多连接带来的握手成本，并缓解应用层队头排队。它还有头部压缩和流优先级机制，但实际收益仍取决于服务端、资源调度和网络环境。

DOMContentLoaded 和 load 有什么区别？

DOMContentLoaded 表示 HTML 已解析完成，DOM 树可用，并且 defer 脚本通常已经执行完。load 更晚，它要求页面依赖的图片、样式、脚本等资源也加载完成。分析首屏时不能只看 load，因为它可能被非关键资源拖慢。

重排、重绘、合成有什么区别？

重排是重新计算元素尺寸和位置，成本较高，可能影响大量节点。重绘是重新生成像素绘制指令，例如颜色或阴影变化。合成是把已有图层组合成最终帧，通常成本较低，transform 和 opacity 动画更容易走合成路径。