---
title: "从 30 秒白屏到“秒开”：这次救命，一半是代码，一半是 AI（和咖啡因）"
date: 2025-08-05
description: "弱网里一秒像一年。我们重做全球化 H5 首页套餐组件：接口该慢还是慢，但首屏先在一百毫秒内跟你打个招呼。不灌方法论，只写哪些活儿丢给模型省手，哪些红线必须自己盯；再顺手说一句——骨架屏跟“先给个像样轮廓”是一件事，跟魔法不是一回事。"
canonical_url: "https://yijinlee.com/articles/article-11"
tags:
  - "Vue 3"
  - 感知性能
  - "乐观 UI"
  - 骨架屏
  - "AI 辅助开发"
topic: "AI 外骨骼"
---

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

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

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

---

### 一、老代码输在“太乖”

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

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

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

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

---

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

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

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

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

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

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

---

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

#### 1. 少打一次重复的仗

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

#### 2. 别把 await 当护身符

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

#### 3. 乐观一点，别害羞

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

---

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

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

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

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

---

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

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

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

### 文末三条，带走不谢

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

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

## 参考文章：相关链接

- [web.dev · Optimize Largest Contentful Paint](https://web.dev/articles/optimize-lcp)（官方文档）— LCP 优化官方路径，对照「30 秒白屏 → 秒开」的证据链。
- [Chrome · RenderingNG](https://developer.chrome.com/docs/chromium/renderingng)（权威引文）— 现代渲染管线背景，帮助判断卡顿属于网络还是主线程。
- [首页性能优化深度复盘：基于证据链的架构治理与根因推演](https://yijinlee.com/articles/article-50)（站内深度）— 同一套证据链方法论在首页 LCP 上的完整复盘。
- [支付按钮点完页面就"瘫痪"？一行 CSS 冻住全场](https://yijinlee.com/articles/article-12)（站内深度）— 感知卡顿的另一面：交互层冻场。