面试必问：从输入 URL 到页面渲染，2026 版完整解析
Must-Know Interview Question: From URL Input to Page Render, 2026 Edition
| Kevin Liu | 2026-08-03T18:29:03
这道经典面试题每年都在考，但 2026 年的答案和之前不太一样了。HTTP/3、Service Worker、Speculation Rules 都得聊到。
The classic interview question updated for 2026 with HTTP/3, Service Worker, Speculation Rules and modern browser pipeline details.
## 为什么要更新这道题 "从输入 URL 到页面渲染发生了什么"几乎是前端面试必考题。但我发现很多候选人还在背 2020 年的答案——HTTP/1.1 的三次握手、同步阻塞的 CSS/JS 加载。 2026 年了，浏览器的行为已经变了很多。这篇文章给出一个完整的、与时俱进的解析。 ## 第一步：URL 解析与预处理 用户在地址栏输入 `https://idev.my`，浏览器做以下事情： 1. **判断是 URL 还是搜索词**：如果没有协议前缀且不像域名，走搜索引擎 2. **HSTS 检查**：浏览器内置了 HSTS 预加载列表，如果目标域名在列表中，自动把 http 改成 https 3. **Speculation Rules 检查**（2026 新增）：现代浏览器支持 ``，可以在用户点击前就预渲染目标页面 ## 第二步：DNS 解析 ``` 浏览器 DNS 缓存 → OS DNS 缓存 → 路由器缓存 → ISP DNS → 递归查询 ``` 2026 年的变化： - **DoH（DNS over HTTPS）** 已成为主流浏览器的默认选项，DNS 查询本身也是加密的 - **Happy Eyeballs v2**：浏览器同时发起 IPv4 和 IPv6 DNS 查询，哪个先返回用哪个 - 大型网站通常返回 **CDN 节点 IP**，基于 EDNS Client Subnet 选择最近的节点 ## 第三步：建立连接（HTTP/3 时代） 这里是 2026 年变化最大的部分。 **传统流程（HTTP/1.1）**： ``` TCP 三次握手 → TLS 握手（1-2 RTT） → 发送请求 ``` **HTTP/3（QUIC）流程**： ``` QUIC 握手（0-1 RTT） → 发送请求 ``` HTTP/3 基于 UDP，把 TCP 握手和 TLS 握手合并了。首次连接只需要 1 个 RTT，后续连接（有缓存的会话票证）甚至可以 **0-RTT**——连接建立的同时就能发数据。 2026 年，全球 Top 1000 网站中超过 80% 已支持 HTTP/3。 ## 第四步：发送请求与接收响应 ``` GET / HTTP/3 Host: idev.my Accept: text/html Accept-Encoding: br, gzip ``` 2026 年的变化： - **Brotli** 已经全面取代 gzip 成为首选压缩算法，压缩率高 20-30% - **Early Hints（103 状态码）**：服务器在处理请求的同时，先发送 103 响应告诉浏览器可以预加载哪些资源 ``` HTTP/3 103 Early Hints Link: ; rel=preload; as=style Link: ; rel=preload; as=script HTTP/3 200 OK Content-Type: text/html; charset=utf-8 Content-Encoding: br ``` 浏览器收到 103 后立刻开始下载 CSS 和 JS，不用等 HTML 解析。 ## 第五步：HTML 解析与资源加载 ``` 字节流 → 字符 → Token → DOM 树 ``` 关键行为： - **预加载扫描器**：浏览器在构建 DOM 的同时，会提前扫描 HTML 中的资源引用（img、link、script），并行发起请求 - **async/defer 脚本**：`async` 下载完立即执行；`defer` 等 DOM 解析完再按顺序执行 - **CSS 阻塞渲染**：CSS 会阻塞首次渲染（但不阻塞 DOM 构建），所以 CSS 应该放 `` - **模块脚本**：`` 默认是 defer 行为 ## 第六步：Service Worker 拦截（如有） 如果网站注册了 Service Worker，请求会先经过 SW： ```javascript self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(cached => { return cached || fetch(event.request); }) ); }); ``` SW 可以直接返回缓存，实现真正的离线访问。 ## 第七步：渲染流水线 ``` DOM + CSSOM → Render Tree → Layout → Paint → Composite ``` 2026 年的现代渲染流水线（以 Chromium 为例）： 1. **Style**：计算每个 DOM 元素的最终样式 2. **Layout**：计算元素的位置和大小（也叫 Reflow） 3. **Pre-Paint**：确定绘制顺序，处理层叠上下文 4. **Paint**：生成绘制指令列表 5. **Composite**：GPU 合成最终画面 关键优化： - **CSS Containment**：`contain: layout` 告诉浏览器这个元素的布局变化不会影响外部，可以局部重排 - **content-visibility: auto**：屏幕外的元素跳过渲染，滚动到视口时才渲染 - **View Transitions API**：页面切换时浏览器自动生成平滑过渡动画 ## 加分回答 面试时可以额外聊的点： 1. **Prerender 2.0**：Chrome 支持完整预渲染目标页面，用户点击时瞬间展示 2. **Priority Hints**：`fetchpriority="high"` 告诉浏览器哪些资源更重要 3. **Back/Forward Cache**：浏览器缓存整个页面快照，前进后退时瞬间恢复 4. **Shared Element Transitions**：跨页面的元素动画过渡 5. **Compression Dictionary Transport**：基于字典的增量压缩，适合 SPA 的差量更新 把这些聊到，面试官应该会觉得你对现代浏览器的理解足够深入了。
## Why Update This Question The classic interview question 'What happens from URL input to page render' needs a 2026 refresh with HTTP/3, Early Hints, Speculation Rules, and modern rendering pipeline changes. ## Key 2026 Updates HTTP/3 (QUIC) reduces connection setup to 0-1 RTT. Early Hints (103) enables resource preloading before HTML processing. DoH encrypts DNS queries by default. Brotli replaces gzip. Service Workers enable offline-first architectures. View Transitions API provides native page transition animations. ## Modern Rendering Pipeline Style → Layout → Pre-Paint → Paint → Composite, with CSS Containment, content-visibility: auto, and Priority Hints for optimization. ## Bonus Points Prerender 2.0 for instant page loads, Back/Forward Cache for snapshot restoration, and Compression Dictionary Transport for incremental SPA updates.