第二章 一份代码的骨架：架构与运行机制
第二章 · 一份代码的骨架
章节摘要：上一章看到了落地转化链的远景，本章走进引擎内部，把骨架拆开：分层架构里谁负责什么、一帧从发令到上屏经过哪些工序、三棵树如何把"描述"变成"像素"、一次点按如何从物理屏回到 Dart 函数、以及耗时的活儿怎么挪出去才能不卡界面。这些机制是全书所有"手感问题"的答案库——掉帧、点不中、卡顿、手势打架，病根都埋在这四节里。
学习目标
读完本章，你应当能够：
- 说出 Framework、Engine、Embedder 三层各自的职责边界，遇到问题知道该去哪层找；
- 描述一帧的完整工序：垂直同步信号、构建、布局、绘制、合成、光栅化，以及 16 毫秒预算怎么被花掉；
- 区分 Widget、Element、RenderObject 三棵树的角色，解释"重建很便宜、重排才昂贵"的原因；
- 用命中测试与手势竞技场的规则，解释嵌套手势为什么会"打架"、该用哪种手势；
- 判断一段耗时逻辑该留在主 Isolate（微任务与事件任务）还是挪进工作 Isolate；
- 在真实设备上复现一次掉帧，并指出它卡在渲染管线的哪道工序。
核心概念速览
一句话立住本章：Flutter 把界面拆成"描述、协调、几何"三层来管，把时间拆成帧来花——理解了这两组拆分，性能问题就从玄学变成了对账。
子章节导航
02-1 架构分层与一帧的旅程：三层架构各自管什么，一帧的六道工序怎么排班，Impeller 为什么取代 Skia。本节给出全章的物理底图。
02-2 三棵树：Widget、Element 与 RenderObject：声明式界面的核心机制。为什么 Widget 每帧重建却不心疼，Element 的生命周期与复用规则，Key 什么时候才真的需要。
02-3 一次点按的完整旅程：从指尖压下屏幕开始，命中测试怎么圈定候选者、手势竞技场怎么裁定胜负、为什么嵌套的两个手势只活一个。
02-4 异步与 Isolate：界面不卡的秘密：事件循环的排队规则，Future 与 Stream 的分工，哪些活儿必须挪去工作 Isolate、怎么挪、代价是什么。
子章节之间的逻辑关系
四节是"空间拆分"与"时间拆分"的对仗：02-1 与 02-2 讲空间——引擎分层、界面分树；02-3 与 02-4 讲时间——事件按排队处理、计算按帧预算分派。它们共同支撑第 3 章的界面写作与第 6 章的性能诊断：写界面时你在"描述"层工作，诊断性能时你检查"协调"与"几何"层，而卡顿的根源常常在"时间"一侧。
本章知识点清单
以下条目均可自测，答不出的就是没读透的位置：
- 按层复述职责：Framework 管界面逻辑，Engine 管图形与运行时，Embedder 管宿主接入；
- 排出六道工序的顺序：垂直同步、构建、布局、绘制、合成、光栅化，并说出每道工序的产出；
- 解释"约束向下、尺寸向上"如何在布局工序里跑完一趟遍历；
- 说出三棵树各自存什么、谁常驻谁丢弃，以及 diff 比对的两个依据（类型与 Key）；
- 描述手势竞技场的裁定顺序：拖动即时、单击等超时、长按双击互斥；
- 区分事件队列与微任务队列的处理时机，并说出 await 的真实成本；
- 判断一段耗时逻辑该不该进工作 Isolate，并说出数据传递的代价。
[02-1 分层与管线] ──提供了──> [帧预算与工序概念] │ │ v v [02-2 三棵树] [02-3 事件旅程] 描述如何变像素 输入如何进 Dart │ │ └────────> [02-4 异步与 Isolate] <────────┘ 耗时活儿如何不挡住下一帧
前置知识与后续延伸
前置：第 1 章的落地转化链（尤其是"调试期 JIT、发布期 AOT"与"宿主喂事件、交画布"两段）；不要求图形学背景，凡用到的概念都在正文里就地解释。
延伸：三棵树机制直接决定第 3 章 Widget 的写法（为什么 build 里要少做事、const 什么时候值得写）；手势竞技场规则是第 3 章动画交互与第 4 章页面滑动返回的地基；Isolate 的用法将在第 5 章 JSON 大报文解析、第 6 章图片处理优化里两次实战。读完本章再回头跑一次第 1 章的热重载，你看到的现象会多一层解释：屏幕刷新的那一下，正是三棵树里最上面那棵被替换重走了一遍管线。