1-6 浏览器的功能 · 波仔的 Web技术原理课

📄 一句话概括

浏览器的活儿分两半：前一半是"把东西搬回来"（要地址、发请求、收内容），后一半是"把东西画出来"——后一半那串固定动作叫渲染路径，从"拿到文件"到"看见画面"，一共十来步。

📝 本节和前面几节的关系

上一篇看了对面那台机器，这一篇回到用户这一头。上一篇讲了服务器里外两层（操作系统加服务器软件），这一篇讲浏览器这个软件——它也不是黑盒，它的活儿是一串有顺序的动作。1-1 说浏览器"负责要、负责画"，本篇就把"画"这一步拆开。至于"要"那一步用的规矩（HTTP），课程后面会专门讲。

一、浏览器除了"看网页"，还管这些

教材把浏览器列出来时，顺手点了几个名字：Chrome、Microsoft Edge、Internet Explorer。这里面的信息量有两层——一层是它们是什么，一层是它们用什么引擎。

先说浏览器本身管的事，比"显示网页"多得多：

地址栏：既是输入地址的地方，也是搜索框——它能分辨你输的是地址还是问题。
前进后退与缓存：回去上一页往往不用重新下载，因为东西存在本地了（这叫缓存）。
书签与历史：把你的去处记下来。
扩展：让别人给它加功能。
标签页与沙箱：一个标签崩了，不牵连其他标签——这是当年 Chrome 一战成名的关键。

缓存这一条特别值得留意：它意味着"第二次打开同一个网站会更快"，而且这可能与服务器无关——服务器那边什么都不知道，浏览器自己就把答案交出来了。

二、名字背后的引擎

教材同时点了 Chrome、Edge、Internet Explorer 三个名字，其实要引出一件事：浏览器不是一个整体，它是由好几个"引擎"拼起来的，其中最重要的两个是：

排版引擎（也叫渲染引擎）：负责把 HTML 和样式变成画面。代表：Blink（Chrome 用）、WebKit（Safari 用）、Gecko（Firefox 用）。
脚本引擎：负责跑页面里的 JavaScript。

为什么要点引擎？ 因为名字换了，引擎可能没换。历史上 Internet Explorer 用的是自家引擎；微软后来放弃它、做了 Edge，Edge 一开始也是自家引擎，2020 年又换成和 Chrome 同一套（Chromium）。所以今天你用 Edge 打开一个网站，看到的画面和 Chrome 打开几乎一样——因为它们内里是同一套。

这也是本篇最实用的一条：换个浏览器牌子，往往换不掉底下的引擎。今天全球浏览器的绝大部分流量，跑的其实是同一套 Chromium。

三、从"文件到手"到"看见画面"：渲染路径

浏览器收到 HTML 之后，要经过一串固定动作才能画出画面。这串动作叫渲染路径，顺序是死的：

解析 HTML，建 DOM 树：把标签读成一棵结构树。
解析样式，建 CSSOM 树：样式也读成树。
合成渲染树：两棵树对到一起，决定"哪些元素真正要显示"。
布局（Layout）：算出每个元素放在哪、多大。
绘制（Paint）：给它们填上颜色和字。
合成（Composite）：分层交给显卡，推上屏幕。

为什么要拆这么多步？ 因为改一处，代价不一样：改颜色可能只要"重绘"，改尺寸要重新"布局"，加一个带动画效果的元素则可能只动"合成"这一步。所以同一个页面上，有些动画卡、有些顺畅——差别就在它触发了几步。

四、动手 Demo：渲染十一步，网络和本机各占多少

下面这个 Demo 把"从敲回车到看见画面"的十一步串起来，算一算时间花在哪。

stages = [("DNS 查询", 20), ("TCP 握手", 30), ("TLS 握手", 40),
          ("服务器处理", 60), ("下载 HTML", 25), ("解析 DOM", 60),
          ("构造 CSSOM", 30), ("合成渲染树", 10), ("布局", 40),
          ("绘制", 35), ("合成图层", 20)]
net = sum(v for _, v in stages[:5])
cpu = sum(v for _, v in stages[5:])
print("网络 %d ms（%.0f%%），本机 %d ms（%.0f%%）" % (net, 100*net/(net+cpu), cpu, 100*cpu/(net+cpu)))

实跑输出：

--------------------------------------------------------------------
D6  浏览器的功能：从【下载完】到【看见】之间发生了什么
--------------------------------------------------------------------
  你敲下回车，到画面画出来，中间是一串固定的动作（渲染路径）：
  ----------------------------------------------------------------------------------------
  阶段                    耗时        说明
  ----------------------------------------------------------------------------------------
  DNS 查询                20 ms       域名换成 IP
  TCP 握手                30 ms       敲三次门才连上
  TLS 握手                40 ms       商量好怎么加密
  服务器处理              60 ms       后台算完、拼好页面
  下载 HTML               25 ms       把第一份文件搬回来
  解析 DOM                60 ms       把标签读成一棵树
  构造 CSSOM              30 ms       把样式也读成树
  合成渲染树              10 ms       两棵树对一起
  布局                    40 ms       算出每个方块放哪、多大
  绘制                    35 ms       填上颜色和字
  合成图层                20 ms       交给显卡，推上屏幕
  ----------------------------------------------------------------------------------------
  合计                    370 ms      本地网络、普通网站

  有意思的两点：
  · 花在【网络】上的（前 5 步）是 175 ms，占 47%；
  · 花在【本机画】上的（后 6 步）是 195 ms，占 53%。
  所以【换更好的网】省一半，【换更快的浏览器】省另一半——两边都得管。

  浏览器本身也早换过血（2026 年全球份额）：
  ----------------------------------------------------------------------------------------
  浏览器              份额        用的排版引擎
  ----------------------------------------------------------------------------------------
  Chrome              69.5%       Blink
  Safari              15.3%       WebKit
  Edge                5.2%        Blink（2020 年换成 Chromium）
  Firefox             3.4%        Gecko

  Edge 在 2020 年把内核换成了 Chromium；Internet Explorer 早已停止支持。
  算下来，Chrome+Edge+Opera+Brave 这一家族血统，占了全球大约八成浏览。

读这个输出：47% 对 53% 这个比例，是这一篇最该带走的东西。网页慢，一半的锅在网、一半在浏览器本身。所以"换个更快的网"能省一半，"换台更好的电脑"也能省一半——只盯一头，效果必然打折。

五、⚠️ 2026 现状

教材 2024 年出版，浏览器这一块变动很大，四处值得补：

Internet Explorer 已经彻底退场。教材还把它列在浏览器名单里，是因为它体量大、历史长。但它早已停止支持（2022 年起逐步停用），今天还在用它打开新网站只会碰到各种毛病。教材列它，是让你"认得这个名字、知道它代表什么"，不是让你去用。
"换浏览器"越来越等于"换皮"。今天多数浏览器用的都是同一套 Chromium 引擎，所以真正的差别不在能不能打开，而在隐私策略、扩展生态、AI 功能。这一点已经和教材成书时不同了。
渲染路径里多了一个常被提的环节。教材列的步骤今天依然成立，但优化时最常被挂在嘴边的是"布局"和"绘制"的触发次数——所以前端会有"少改尺寸、多用合成动画"这类做法。
AI 功能进了浏览器。近两年出现了带 AI 助手的浏览器，能替你总结页面、填表。它不改变渲染路径，但改变了"人怎么用浏览器"这件事——这是教材成书之后才普遍出现的新变化。

30 秒实验

随便打开一个网页，按 F12 打开开发者工具，做三件事：

切到 Performance（性能） 标签，点录制，然后滚动一下页面，停掉录制。你会看到一条时间轴，上面分了几段——其中就有"布局""绘制""合成"这些名字，正是渲染路径里的那几步。
切到 Network（网络） 标签，刷新页面，看那一长串请求——这就是"网络那 47%"的样子。
试试返回上一页，看网络标签里是不是安静了——东西从缓存里拿的，不用再要一遍。

常见误区

错误：Edge 和 Chrome 是两个完全不同的浏览器。——纠正：它们今天用的是同一套引擎（Chromium）。所以同一个网站在两边通常长得一样。Edge 真正的差别在它绑定的微软服务和默认设置，不在"能不能正确显示网页"。判断两个浏览器是不是"同一个底子"，看它们用的引擎，不看牌子。
错误：网页慢就怪网速。——纠正：Demo 里网络只占 47%，另一半花在浏览器自己解析和绘制上。所以同一个网络下，不同网站速度可能差很多。排错时先分清楚是"没拿到"还是"拿到了画得慢"——前者看网络标签，后者看性能标签。
错误：缓存只会占地方，清掉最好。——纠正：缓存正是"第二次更快"的来源。全部清掉，你每次访问都要从零开始下载。只有当页面更新了却看到旧的、或者出了问题要排除干扰时，才需要清缓存。
错误：渲染路径的步骤只是理论，实际开发用不上。——纠正：它直接决定了"改一行代码，页面会不会卡"。改颜色只触发重绘、改尺寸触发重新布局——知道代价在哪一步，才能知道该避开什么。这也是为什么前端工程师会说"少动布局"。

自测三问（点开对答案）

1. 为什么说"2020 年 Edge 换引擎"是浏览器历史上的一件大事？ —— 因为**它意味着主流浏览器基本上归到了一套底子上**。换引擎之后，网站开发者不用再为好几套引擎分别适配，成本大降；但代价是**整个 Web 的技术走向集中到了少数几家公司手里**——**方便和集中，是一枚硬币的两面**。 2. 浏览器缓存能加速，是谁在做决定——服务器还是浏览器？ —— **两边都在参与**。服务器会在响应里说明"这份内容可以缓存多久"，浏览器按这个说明把它存下来；下一次访问时先看本地有没有、还新不新鲜。**所以缓存不是浏览器自作主张，是它和服务器商量好的**——这也解释了为什么有时候页面更新了、用户看到的还是旧的。 3. Demo 里"网络 47%、本机 53%"，如果想加快，能动的有哪些？ —— **两头都能动，而且方向不同**。网络那一头：用更快的连接、让服务器离用户更近、少下载东西（压图片、合并文件）。本机那一头：**让页面别做太多布局和绘制**、用更省的方式做动画。**所以"网页优化"从来不是一件事，是一条链上每一步都能省一点。**

☐ 下一节（1-7 独立于浏览器之外的Web连接机制：API）