客户端渲染：从状态到画面

这是交互终端层的一个专题。它不把客户端渲染等同于浏览器页面，也不把某个框架当作渲染本身。这里研究的是同一件事：事件和状态如何经过运行时与宿主，变成用户看得见、能操作、且能正确解释的画面。

出发骨架

输入事件 / 外部消息 / 生命周期变化
        -> 状态转换与命令结果合并
        -> UI 描述
        -> 更新计算
        -> 宿主呈现
           - 布局
           - 绘制
           - 栅格化或字符缓冲更新
           - 合成或最终输出
        -> 用户观察与下一次事件

先用这条骨架定位问题，再深入某个宿主。它把“状态正确”“用户看见正确画面”“共享事实已经确认”区分开来：三者相关，但不能互相替代。

阅读顺序

1. 浏览器渲染管线：从导航、解析到首帧；DOM、CSSOM、样式、布局、绘制、栅格化与合成分别做什么。
2. 浏览器运行时与帧调度：事件循环、输入、任务、微任务、动画帧、主线程与合成线程如何共同决定一帧。
3. 浏览器内核渲染细节：布局树、无效化、分片、图层、滚动、GPU 合成、资源加载和性能证据。
4. Flutter 对照：Widget、Element、RenderObject、Layer、Scene 与 Skia/Impeller 路径如何对应或不同于浏览器。
5. 故障定位与练习：从现象追到状态、更新、宿主呈现或共享事实边界，并通过可观测证据验证。

四个边界

边界	应该问的问题
状态与 UI 描述	当前画面是否真的表达了当前本地状态？
UI 描述与宿主呈现	框架算出的更新，如何落到 DOM、控件树、图层或字符网格？
呈现与交互	画面更新后，命中测试、焦点、无障碍树和输入是否仍然一致？
本地画面与共享事实	用户看到“成功”时，服务端事实是否真的已经确认？

使用方法

阅读时不要只记术语。每个概念都应回答四件事：它接收什么输入，维护什么中间表示，输出给谁，失败时用户和系统各能观察到什么。浏览器内核作为主例子，Flutter 作为同构但不同实现路径的对照；两者都服务于这条骨架，而不是取代它。