I2.03.1show ready chunks first设计
先呈现已就绪部分优于整体等待
别名: 分块先画 · 不等全部就绪 · progressive first paint
概念解释
页面或结果很少在同一毫秒全部到齐。分块加载(chunked loading)的第一条原则是:已经就绪的那一块先上屏,不要为了还没到的图、评论、推荐而扣住整页。整体等待把所有块的最慢者变成所有人的等待;先呈现把可开始读、可开始认路的时间提前到最快那一块。
这条只管「先画已有的」。后到的会不会把已画的挤走、先画哪一块更值钱,是后面两叶。
机制
一次取数在内部是若干独立完成的部分:壳、正文、媒体、侧栏、页脚。人的工作却从「看见能认的结构」就开始了——读标题、判断这是不是要的页、决定要不要滚。把壳和标题扣到最后一张图回来,等于把已经可做的认知工作强行停在起跑线。感知上的第一帧(first meaningful paint 一类的时刻)往往由那块能让人认出路的内容决定,不是由 100% 字节决定。
整体等待有时被当成「免得露出半成品」。半成品的风险是真的,但对策不是把已就绪的也藏起来,而是让先上屏的那一块自己说得通。藏起来付出的是整段空白,空白会被读成慢、空、或坏。先画是用「可见的不完整」换「不可见的完整」;在加载族里,可见的不完整通常更可过活,因为人可以开始,而不是只能盯着等待皮。
边界
原子性要求整份一起出现的结果(支付回执、法律文本的签署版、对账数字)不能先画一半:一半会变成可被截图传播的错数据。首块若小到认不出这是什么页(只有一个无标签的底栏),先画没有把认知工作提前,等于没分块。极短的整体等待里,分块的切换本身会闪,不如一次出齐。离线或本地已经齐的内容不存在「先呈现」的问题,硬拆成块是制造假的到达节奏。
怎么落地
- 把页面拆成可独立完成的块,壳和主列一旦可认路就上屏,媒体和次要模块后到。
- 不要用「等 API 全部 resolve」当默认;默认应是「这个块的数据到了就画这个块」。
- 首块必须能回答「我在哪、这是不是我要的」。答不出就还没到可呈现的就绪。
- 验证:把最慢的那路接口拖到五秒。若五秒内屏幕仍是整页等待皮,而日志里标题和导航早已返回,就是在为未就绪的部分扣押已就绪的部分。