先说一句

前面写了端侧模型推理性能调整，把推理速度从 秒左右干到了 秒上下。当时觉得——快了稳了可以上线了。

结果上线第二天使用者反馈就来了。

不是“这个 AI 不够聪明”，也不是“跑得太慢”。而是更直接的问题——"页面卡死了" “点不动了” “这个功能是不是坏了"。

性能调整搞定了但使用者体验还是翻车了。而且翻车的姿势，跟我想的完全不一样。其实，

翻车一的观点是。推理快了UI 卡了

第一个反馈来自一个使用者，他用的是一台老款安卓中端机。

说到他说。“点了一下 AI 分析，页面就动不了了等了十几秒才好。按理说，”

痛点： 使用者在低配设备上体验到明显卡顿与延迟。即使推理本身已极快，

I 当时的第一反应是——推理速度不是已经调整到 秒了吗？怎么还会卡，

排查了一圈后发现根因是：流式输出的 token 回传频率太高，主线程来不及渲染。

之前为了做流式输出，我让推理线程每生成一个 token 就通过 postMessage 发给主线程。在高端机上，这个频率没问题——主线程处理得过来。但在低端机上，主线程的渲染能力跟不上，消息队列越积越多，UI 就卡死。postMessage 的通信机制在 MDN 文档里有详细说明，但文档不会告诉你的是——高频消息在低端机上会压垮主线程的事件循环。

// 问题代码：每生成一个 token 就发消息
function onToken {
postMessage;// 高频发送
}
worker.onmessage = e => {
if {
appendToUI;// 每次都要渲染
}
};

表现：

至于推理线程，每秒发送十几个 token
再看主线程渲染，每秒最多处理不到十次
再看消息队列。持续堆积 → UI 阻塞 → 使用者看到页面卡死

解决方式：

// 节流控制渲染频率，让低端机也能流畅显示
let buffer =;let timer = null;worker.onmessage = e => {
if {
buffer.push;if {
timer = requestAnimationFrame => {
appendToUI);buffer =，timer = null;})，}
}
};

效果：

• "文字一批一批地出现"，而不是“一出现一个字页面就抖一下”。
• User 感觉 UI 更平滑，对产品满意度提高。

从翻车二来看，模型还没加载完。使用者就点了

第二个反馈来自一个性急的使用者。说起来，他打开页面看见“AI 分析”按钮，就直接点下去。随后页面白屏十几秒，他以为功能坏掉，于是关闭页面。

User 痛点：“按钮可用却导致白屏” — 使用者期待立刻交互，却被长时间无响应挫败。按理说，

根因： "模型加载需要时间。但没有做好加载状态保护"

// 问题代码：按钮一直可用
button.addEventListener => {
const result = await model.generate;// 模型未加载完成 → 异常/卡顿
});

Solve:

• 让按钮不可点击直到模型完全加载；并展示加载进度，让 UX 明确等待状态。

// 修复示例：
button.disabled = true;button.textContent = '模型加载中...';const generator = await pipeline('text-generation','Xenova/Qwen2.-.5B-INT4'。{
progress_callback: progress => {
button.textContent = `加载中 ${Math.round}%`;}
})，// 加载完成后启用按钮
button.disabled = false;其实，button.textContent = 'AI 分析';怎么说呢，

• 再看流程化呈现。
  • User 打开 → 按钮灰色 + “加载中 %”显示；等待几秒，最终变成可点击状态；点击后立即得到结果，无白屏。

从翻车三来看，使用者以为这个 AI 是 ChatGPT

A 第三条反馈最扎心。一个人用完之后说：“这个 AI 不太行。 我问它‘帮我写一份产品需求文档’，它回了一堆废话。 说起来，” 日志显示端侧 .5B 模型确实回复空洞——毕竟小参数量与 INT4 限制无法满足复杂创作需求。

User 痛点：“期望与实际功能差距大” — 使用者误以为这是高级 ChatGPT，一旦出现不足即失望。

Mistake： "UI 没有纠正预期".

• 在 UI 上加提示文字：
  • "端侧 AI 模型适合简单问答和摘要。复杂任务建议使用云端版本。"
• 输入时做判断。如果输入过长或包含关键词，弹出提示，引导至云端。
  • E.g.。“此类任务建议切换到云服务，可获得更精准结果。说起来，”

// 判断是否适合云端：
function shouldUseCloud{
const complexKeywords=;const hasComplex=complexKeywords.some);const isLong=prompt.length>500;按理说，return hasComplex||isLong;}
if){
showTip;}

• E.g.。在线数据抽样显示：
  • "命中复杂关键词：" 次
  {% raw %} "命中任一条件：" 次 → 部分请求被引导至云端，而非全部落在局部能力不足之处。结果导致整体满意度明显提高。{% endraw %}
{% raw %}

{% endraw %} {%- endif -%}

端侧模型上线检查清单

screenshot / 使用者调研反馈 | 检查提示文字 & 输入阈值判断逻辑是否正常运行 | 验证日志记录是否正确转向云服务模式 {%- endif -%} screenshot / network error handling | 验证断网环境下弹窗提示正常工作 | 检查兜底错误信息是否友好 | {%- endif -%} screenshot / cold start time measurement | 确认首帧时间 ≤ X 秒 | {%- endif -%}

检查项	对应翻车案例	检查方式 / 工具	严重程度
UI 主线程是否被推理输出阻塞？	翻车一	实测低配设备上的流式输出频率 & UI 响应监控	🔴 必须！
是否有模型加载状态保护？	翻车二	点击测试 & 网络模拟器断网时验证 | 检查 button disabled & progress callback 是否生效	🔴 必须通过！
是否主动管理使用者预期？	翻车三

边界说明

• Makes clear that this checklist assumes model itself is functional and capable of tasks it’s intended for.
{%- endif -%}
• This is specifically aimed at browser‑side inference scenarios. For native App deployments。UI thread contention may be less severe due to 娱乐ter rendering engines,but load protection and expectation management remain equally critical.
{%- endif -%} {%- endif -%}

回头看

• The three failures all point back to a single oversight:
{%- endif %} {%- else %} {%- endif %} {%- endfor %}
…

---