从 30 秒白屏到“秒开”：这次救命，一半是代码，一半是 AI（和咖啡因）

首页是第一个握手。它要是卡住，像相亲对象迟到半小时还不回消息——你很难骗自己“再等一下就好”。

我们那个全球化 H5 的套餐余量块，弱网下面子能白三十秒。老板：“体验像断网。” 我：“未必断，可能只是 UI 装死。” 冷静下来，一边改代码，一边把模型当嗓门大的同事：不指望它背锅，指望它把试错摊开。

先掏底： 接口物理耗时几乎没变，也没谁偷偷换光缆。变的是用户在几百毫秒内看见“这页还活着”。餐厅里先倒杯柠檬水，等牛排时你就不那么像复仇者。

---

一、老代码输在“太乖”

原先像考完试才敢交卷的好学生：真数据不到，脸都不露。

// 阻塞式心智：等来真数据才敢见人
queryUsage().then((res) => {
  showUsage.value = true;
  renderData(res);
});

`then` 没错，错的是把能不能看见界面和接口今天脸黑不黑捆一根绳上。

多说一句就收口：骨架屏无非是给人一个可预期的中间样子，跟模型先吐一坨概率最高的续写有点像——像归像，一个要对像素负责，一个要对 tokenizer 负责。 我们干的事，只是把“校对窗口”挪到首屏。

---

二、和模型怎么搭班（没有神话，只有工序）

谁跟你说“一句提示词上线”，多半接下来要扫码。

第一轮： 瀑布图、症状小作文扔进去，让它列可能链路——DNS、双重请求、`await` 把 setup 勒死那种……嗓门大就行，不必全对，先把死屋子吵活。

第二轮： 让它草一版：哪些 API 能踢出关键路径、缓存往哪儿蹲更省。我逐段对照源码，剪掉它编出来的 API 和不可能成立的童话——幻觉不是人品问题，是统计，当副 linter 刚好，当宪法免谈。

第三轮： Skeleton 留白、动画别闪瞎、TTL 到了怎么悄咪咪刷新——让它列 checklist、顺一遍产品能看懂的 changelog。省下的时间？一点点摸鱼，多数给 review 和灰度。

奖励函数、RLHF 那种长篇课这里跳过：线上认的是崩溃率，不是“看起来像好人”。

---

三、落地的三板斧（没花名，别怕）

1. 少打一次重复的仗

我们曾经同时撞 `queryUsageQuick` 和 `queryUsage`，像超市门口连刷两次会员卡——礼貌且多余。合成一条可信取数路，Cache-First 沉进 service，业务层少指挥两句，世界会安静。

2. 别把 await 当护身符

非关键链路别跟 setup 里同一条 `await` 殉情。Promise 自己去跑，组件先挂上，帧还在转。没魔法，只是别把卡顿钉在用户视网膜上。

3. 乐观一点，别害羞

`showUsage` 默认 `true`。上来先看熟脸的环形占位或本地快照，别给道德高地式空白。真数到了再对齐——像改作文，不是重写人生。

---

四、改完长什么样（仍然很土）

const showUsage = ref(true); // 先请人坐下，再上菜

function asyncLoadUsage() {
  queryUsage()
    .then((res) => {
      parseAndUpdateUsageData(res);
    })
    .finally(() => {
      stopSkeletonloading();
    });
}

你皱眉：“不还是 `then`？” 质变在策略叠 buff，不靠咒语。组合可以一起想，历史债还是得自己还——分期付款的那种还，通常叫咖啡。

---

五、结果：戏剧，但没骗你

后端照旧偶尔思考人生三到三十秒。我们量到的是：关键块从“泡完面还烫嘴”落到“撕调料包前已经在冒气”（大约从三万毫秒量级掉到一百毫秒内，视设备与网络，评论区不打架）。

人怕的不是等，是不知道自己还在不在等。感知性能不是演技，是给烂网络一件得体外套。

文末三条，带走不谢

1. 界面先有，数据后准：别用“出没出现”绑架“对不对”。 2. 模型是油门，方向盘还是你：它把搜索空间撑开，你把风险收口。 3. 摸清关键渲染路径：承重墙和装饰画分清楚，别让装饰画堵消防通道。

写到这儿准备关机。你要也在熬白屏，记住先给用户那杯柠檬水——骨架屏也行，你跟模型一起赶出来的靠谱补丁也行。慢等太难熬，先让人看见，就好很多。