从输入URL到页面显示：现代浏览器到底在背地里忙什么？

> 核心直觉：你敲下回车那0.1秒，浏览器已经干了几十件事——DNS查询、TCP握手、TLS协商、HTML解析、CSS解析、JavaScript编译、DOM构建、样式计算、布局、绘制、合成……但大多数开发者对这些"黑箱操作"一无所知，优化性能时只能靠猜。Addy Osmani——那个16岁写浏览器、后来领导Chrome Developer Experience的人——把这一切摊开了给你看。

---

一、一个被问烂了的面试题

"从输入URL到页面显示，发生了什么？"

标准答案是： 1. DNS解析 2. TCP三次握手 3. TLS协商（HTTPS） 4. 发送HTTP请求 5. 服务器响应 6. 浏览器解析HTML 7. 构建DOM树 8. 解析CSS构建CSSOM 9. 合并成渲染树 10. 布局（Layout） 11. 绘制（Paint） 12. 合成（Composite）

背完这12步，面试官点点头，你松了口气。

但这12步是1980年代的思维模型。 现代浏览器的复杂度远超这个线性流程。真正的问题不是"发生了什么"，而是：

> 浏览器怎么在200毫秒内做完这一切？它用了哪些你根本想不到的优化？以及——你写的代码，有多少次无意中把这些优化全毁了？

---

二、Addy Osmani 是谁？为什么听他讲

Addy Osmani 的履历本身就像一部浏览器发展史：

• 16岁：在爱尔兰小镇的高中里，用C++写了一个叫 XWebs 的浏览器，支持下载管理、内置播放器、网页编辑器，甚至还有语音朗读助手。拿了全国青年科学竞赛一等奖。
• 2012年：加入Google，领导 Chrome Developer Experience 团队。
• Chrome DevTools：他 overseeing 的工具，4000万开发者每天用。
• Lighthouse：他参与创建的网站性能审计工具，每月运行数千万次。
• Core Web Vitals：他和同事定义的 LCP、CLS 等性能指标，直接影响Google搜索排名。
• Speedometer：他和Apple WebKit团队合作创建的基准测试，驱动了Apple、Intel优化芯片和引擎。
• 2023-2025年：领导把 Google Gemini AI 集成到 Chrome DevTools。

---

三、网络层：投机加载的艺术

3.1 你以为的加载 vs 实际发生的加载

你以为的流程：

请求HTML → 收到HTML → 解析HTML → 发现需要CSS → 请求CSS → 
收到CSS → 解析CSS → 发现需要图片 → 请求图片 → ...

实际的流程（Chrome）：

你还没敲完URL → 浏览器已经在猜你要访问什么
收到HTML第一个字节 → 预加载扫描器已经开始扫描
发现 <img src="hero.jpg"> → 还没解析完HTML就已经在下载图片
发现 <script> → 如果是async/defer，并行下载；如果是同步，阻塞解析
发现 <link rel="preload"> → 立即提升优先级

3.2 预加载扫描器（Preload Scanner）——浏览器的"偷看者"

这是现代浏览器最重要的隐藏优化之一。

当HTML解析器遇到