I2.03.1show ready chunks first设计

先呈现已就绪部分优于整体等待

别名: 分块先画 · 不等全部就绪 · progressive first paint

概念解释

页面或结果很少在同一毫秒全部到齐。分块加载(chunked loading)的第一条原则是:已经就绪的那一块先上屏,不要为了还没到的图、评论、推荐而扣住整页。整体等待把所有块的最慢者变成所有人的等待;先呈现把可开始读、可开始认路的时间提前到最快那一块。

这条只管「先画已有的」。后到的会不会把已画的挤走、先画哪一块更值钱,是后面两叶。

机制

一次取数在内部是若干独立完成的部分:壳、正文、媒体、侧栏、页脚。人的工作却从「看见能认的结构」就开始了——读标题、判断这是不是要的页、决定要不要滚。把壳和标题扣到最后一张图回来,等于把已经可做的认知工作强行停在起跑线。感知上的第一帧(first meaningful paint 一类的时刻)往往由那块能让人认出路的内容决定,不是由 100% 字节决定。

整体等待有时被当成「免得露出半成品」。半成品的风险是真的,但对策不是把已就绪的也藏起来,而是让先上屏的那一块自己说得通。藏起来付出的是整段空白,空白会被读成慢、空、或坏。先画是用「可见的不完整」换「不可见的完整」;在加载族里,可见的不完整通常更可过活,因为人可以开始,而不是只能盯着等待皮。

边界

原子性要求整份一起出现的结果(支付回执、法律文本的签署版、对账数字)不能先画一半:一半会变成可被截图传播的错数据。首块若小到认不出这是什么页(只有一个无标签的底栏),先画没有把认知工作提前,等于没分块。极短的整体等待里,分块的切换本身会闪,不如一次出齐。离线或本地已经齐的内容不存在「先呈现」的问题,硬拆成块是制造假的到达节奏。

怎么落地

  • 把页面拆成可独立完成的块,壳和主列一旦可认路就上屏,媒体和次要模块后到。
  • 不要用「等 API 全部 resolve」当默认;默认应是「这个块的数据到了就画这个块」。
  • 首块必须能回答「我在哪、这是不是我要的」。答不出就还没到可呈现的就绪。
  • 验证:把最慢的那路接口拖到五秒。若五秒内屏幕仍是整页等待皮,而日志里标题和导航早已返回,就是在为未就绪的部分扣押已就绪的部分。

延伸

  • 同组I2.03.2 后到内容不应挤动已呈现内容 · I2.03.3 分块顺序应按内容重要性
  • 相邻I2.11 分块加载与逐步呈现 · I2.07 感知性能 · I1.07 首次响应与后续响应
  • 站内检索chunked loading · first meaningful paint · show ready first

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/I2.03.1