Appearance
浏览器
元信息
- 目标：分清浏览器产品的三层结构（内核、发布版、套壳），理解为什么品牌几十款、活跃内核只有三种；认识 agent 浏览器这一最新形态（LLM 当司机，发动机未变）；学会用特性支持表查某个 CSS/JS 特性能不能用
- 关键概念：内核、渲染引擎、JS 引擎、Chromium、发布版、套壳浏览器、双核浏览器、agent 浏览器、特性支持表
- 关联阶段：cp1
- 常见误区：以为每款浏览器都是厂商从零写的（多数产品共用同一套内核）；以为国产浏览器与 Chrome 无关（大多是 Chromium 套壳）；以为 agent 浏览器是第四种内核（内核仍是那三种，新的是"谁在开车"）；以为"我的浏览器支持"就等于"用户的浏览器支持"（要查表，见文末）
HTTP客户端把浏览器放在能力阶梯的顶端。本页拆开这台顶端机器：市面上的浏览器品牌有几十款，拆到底，核心只有三种。看懂"内核、发布版、套壳"三层，就明白了浏览器的格局，也明白了前端兼容性该按什么判断。
内核：浏览器的发动机
内核（engine，引擎）是浏览器里真正干活的部分，对应能力阶梯的后三格：
- 渲染引擎：解析 HTML/CSS，算出每个元素的位置和样子，画成图像
- JS 引擎：解释执行 JavaScript
要同时实现 Web 全部标准（HTML、CSS、JS、网络、安全）的内核，全世界活跃的只剩三种：
| 内核（渲染引擎） | JS 引擎 | 代表浏览器 | 维护方 |
|---|---|---|---|
| Blink | V8 | Chrome、Edge、Opera 及多数国产浏览器 | Chromium 开源项目（Google 主导） |
| WebKit | JavaScriptCore | Safari | Apple |
| Gecko | SpiderMonkey | Firefox | Mozilla |
历史上还有 IE 的 Trident、旧 Edge 的 EdgeHTML，都已退役：2020 年起，连微软也放弃自研内核，Edge 改用了 Chromium。内核为什么越打越少？因为要跟上 Web 标准的全部变化，Chromium 的代码量已是千万行级。不是做不出第四种，是养不起第四种。
顺带一条谱系：Blink 本身是 2013 年 Google 从 WebKit 分叉出来的，所以 Chrome 与 Safari 算同源远亲。内核具体怎么把字节变成像素，见第 6 周：关键渲染路径。
发布版：Chromium 与 Chrome
Chromium 是开源项目，提供内核加一个最简界面，谁都可以下载、编译、改造。Chrome 是 Google 在 Chromium 基础上打包出的发布版（distribution，正式发布的完整产品），再加品牌、音视频编解码器、自动更新、Google 账号服务。
这个关系和 Linux 一样：内核只有一个，Ubuntu、Debian 等发行版各有各的打包和配套工具。浏览器也如此，一个内核之上，长出各家产品：
套壳浏览器
发布版再往外一层是套壳浏览器：不维护内核，也不从 Chromium 自己编译，直接拿现成的浏览器换上自己的外壳，再加自己的功能，如皮肤、鼠标手势、收藏同步、广告过滤。国产浏览器（360、QQ、搜狗、UC 等）几乎全是这一类。
"双核"浏览器是套壳的一个历史特产：同时内置 Trident（IE 的内核，用于兼容老网银、老政务站）和 Blink（日常浏览），遇到老站一键切换。今天 Trident 已退役，双核渐渐成了历史名词，但不少国产浏览器里的"兼容模式"按钮还在。
套壳不止用来做浏览器。Electron 框架把 Chromium 打包进桌面应用，VS Code、钉钉、Figma 桌面版都是这么做的：界面用 HTML/CSS/JS 写，跑在内置的 Chromium 里。对前端的启示：学好前端三件套，桌面应用也能写。
对前端开发的意义：用户的浏览器五花八门，但判断兼容性只需要看内核加版本，三种内核各测一份就覆盖了绝大多数用户。另外，实训：curl 收发报文里见过的 User-Agent 字段，套壳浏览器常会照抄 Chrome 的，服务器不能全信它。
agent 浏览器：驾驶座上坐进了 AI
2025 年起浏览器家族又添一类成员：agent 浏览器（agentic browser）。浏览器里常驻一个 LLM（大语言模型），你不告诉它点哪里，只告诉它目标——"帮我订一张下周去上海的最便宜机票"——它自己看页面、点按钮、填表单，一步步做完。
拆开看它怎么干活，还是拿能力阶梯当尺子：
- 看：LLM 拿到页面的截图和结构——DOM，或无障碍树（accessibility tree，屏幕阅读器读的那份页面语义描述）
- 想：对照目标规划下一步，"先点哪个链接、这个框填什么"
- 动：通过 Chrome DevTools 协议（CDP，就是 F12 开发者工具背后那条控制通道）发出点击、输入，浏览器照常渲染执行
看完想、想完动，循环直到任务完成。这是在能力阶梯顶端之上又加了一格：此前所有客户端的差别都在处理流程的长短，agent 浏览器走完全程之后，还多了"理解内容、自主决定下一步"。爬虫也理解内容，但按人预先写死的规则行事；agent 拿着目标现场规划。无头浏览器（有渲染无屏幕）常被用作 agent 的"手"——脑是 LLM，手是浏览器。
注意它的谱系位置：不是第四种内核。眼下这批产品——OpenAI 的 Atlas、Perplexity 的 Comet、The Browser Company 的 Dia，以及给现有浏览器装上的 Claude、Chrome 里的 Gemini——几乎全建在 Chromium 上。套壳浏览器换的是皮，agent 浏览器换的是司机：发动机没变，驾驶座上从人换成了 AI。
对前端开发，这一格带来两个实际变化：
查特性支持
- caniuse.com：输入一个 CSS/JS 特性，一张表列出每种浏览器从哪个版本开始支持，兼容性查询的第一站
- MDN：每个特性的文档页下方都有"浏览器兼容性"表，查用法时顺手就能看
- Baseline：把"三大内核都可用"的特性标为 Baseline，认这个标记就不必逐个查表
- StatCounter：各浏览器、各地区的市场份额，用来定兼容测试的优先级，份额小的内核可以先不支持
参考
- 教你写一个浏览器的电子书《Web Browser Engineering》 https://browser.engineering/
- 技术博文《Chromium 渲染流水线——字节码到像素的一生 》 https://blog.ursb.me/posts/chromium-renderer/
- 从点击到渲染 https://abhisaha.com/blog/exploring-browser-rendering-process?