提前呈现不可用的控件会制造无响应的印象
别名: dead button · hydration gap · 过早可点 · 无响应印象
概念解释
控件按最终可点的样子画出来，但事件还没绑上，用户会按真按钮的预期去点。点了没反应，会再点、会以为坏了、会离开，或等脚本终于就绪时把重复点击一次提交两次。提前呈现不可用的控件，制造的是无响应的印象，不是「首屏更快」。骨架、禁用态、明确的「还不能用」至少承认空隙；高保真的假可点把空隙伪装成故障。
它处理的是空隙被怎么表现，以及这种表现如何被读成损坏。两个时刻存在是前提，这里管的是你在空隙里画出了什么。
机制
可点击外观是一种承诺：有尺寸、有对比、有按钮形状，手指就会按下去。输入发生时若监听不在，系统通常吞掉这次点击，或把焦点移上去却不触发动作。用户得不到 100 ms 内的任何变化，就会用「坏了」来解释，而不是用「还在加载」。重复点击在水合完成的那一瞬一起放出，表单一式两份、购物车加了两次。视觉上越像成品，承诺越强，被违背时的损坏感越重。灰色禁用、脉冲骨架、进度条把承诺降成「还没准备好」，同一段等待就被读成进行中，而不是故障。
这和感知等待可以缩短不是一回事。把不可用的东西画成可用，等待被感知为失败；把未就绪画成未就绪，等待被感知为等待。提前画成品是在两个时刻之间插入一次虚假的交互就绪。
边界
静态链接、原生 <a> 和 <button> 在 HTML 到达时就可以工作，不必等框架水合——对它们画最终外观是真的就绪，不是伪装。预取之后瞬间可点的过渡，空隙短到按不进去，损坏印象来不及形成；一旦在慢网上空隙可被点入，规则就回来。游戏、canvas 自己画的按钮没有 DOM 禁用态，需要自己的「未就绪」外观。只读预览（文章正文先出来、评论框稍后）如果评论框画成可输入却打不了字，同样是假可点；正文本身不是控件，先画没有这个问题。辅助技术在空隙里可能已经能聚焦到视觉上的按钮，无响应会被读屏报成「已选中」却无动作，损坏感同样成立。
怎么落地
- 主操作、提交、加购、打开菜单：在监听就绪之前用骨架、
disabled或不可聚焦占位，不要用最终按钮外观。 - 原生就能工作的链接和按钮尽早输出真实 HTML，让它们在水合前就可点，而不是先画一层假按钮再替换。
- 水合完成后若发现空隙里有点击，合并成一次并给出反馈，避免双提交。
- 验证：CPU 限速下尽快去点主按钮。记录第一次点击到第一次可见响应的时间，以及有没有双提交。若看起来像按钮却没有任何响应或忙状态，就是过早呈现。对比改成禁用/骨架后，同样空隙是否还被说成「坏了」。