E4.18.4placeholder flicker on fast scroll设计研究

快速滚动时占位内容闪烁会影响可读性

别名: 骨架闪烁 · 虚拟列表空白 · 滚动占位 · blank rows

概念解释

窗口外的行在滚进视口的那几帧里往往还没准备好:节点刚创建、图片未取回、文本还是空的。快速滑动时,视口里会闪过空白块、灰色条或上一条残留的错行。占位闪烁(placeholder flicker)让正在找的那一行在最需要被读的时候不可读。它不是性能卡顿本身,而是窗口补位策略在高速滚动下露馅。

机制

虚拟化把创建工作推迟到行接近视口。慢滚时,缓冲里的行已经创建完毕,视口始终是满的。快滚时,窗口移动快过创建和数据绑定,视口短暂地由占位符组成。占位符若是空白,扫描中断;若复用了上一窗口的节点却没换数据,会出现「张冠李戴」的几帧,比空白更糟,因为错误内容会被当成真的读进去。图片和头像比文本更慢,闪烁在图上更明显。回收池的节点若带着旧的选中态或高度,闪一下还会造成布局跳动。可读性失败发生在滚动的过程中,停下来之后列表可能已经正常——所以不能只检查静止态。

怎么研究

用程序化的快速滑动穿过长列表,录像逐帧看视口里空白、错行、旧选中残留的帧数。自变量:缓冲行数、是否同步绑定文本、图片是否延迟、回收时是否重置状态。因变量:不可读帧比例、错行被报告为真实内容的次数。人眼任务:在快滑中途叫停,立刻说出当前行,对照是否说了占位或错行。

边界

极慢的精确滚动几乎不闪。低端机或主线程被占时,即使用了缓冲也会闪,需要减小窗口或降级图片。无限加载在底部的「正在取下一页」不是占位闪烁,那是数据还没有;窗口闪烁是数据已有、视图未就绪。打印和截屏碰到未创建的行会空白,属于同一类未就绪,只是发生在导出通道上。

怎么落地

  • 缓冲按最大预期滑动速度来,文本在进入视口前同步填好,不要等图片。
  • 回收节点时清掉旧文本、旧图、旧选中和旧高度。
  • 占位用稳定的浅色块,不要复用上一行的字。
  • 验证:在真机上用力快滑再急停,立刻读当前行。读到空白或别人的名字,就加缓冲并检查回收重置。

延伸

  • 同组E4.18.1 虚拟滚动只渲染可见区域以维持长列表的性能 · E4.18.2 页面内查找在虚拟滚动下可能失效 · E4.18.3 滚动条位置与实际数据量的映射需保持准确
  • 相邻E6.07 骨架屏 · E4.02 列表项
  • 站内检索placeholder flicker · view recycling · scroll jank

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E4.18.4