侦探式排查实录从 30 秒白屏到"秒开"：记一次关于感知性能的首页优化复盘
首页套餐余量圈（V/D/S）经常白屏 5～30 秒才出现。根因是前端将 queryUsage 结果与首屏渲染强绑定，违反关键渲染路径。通过骨架屏 + 乐观 UI、去掉重复请求、非阻塞异步加载，在不改后端的前提下，将感知等待时间从 30 秒降至 <100ms。
更新于 2026-01-04年份：2026字数：1,800阅读时长：6 分钟
首页套餐余量圈（V/D/S）经常白屏 5～30 秒才出现。根因是前端将 queryUsage 结果与首屏渲染强绑定，违反关键渲染路径。通过骨架屏 + 乐观 UI、去掉重复请求、非阻塞异步加载，在不改后端的前提下，将感知等待时间从 30 秒降至 <100ms。
一个看似简单的防重复点击需求，因为一行粗暴的代码，导致用户支付时整个页面陷入"假死"状态。本文从 pointer-events 的底层机制出发，探讨如何从"暴力全局锁"进化为"优雅精准锁"，并在前端性能优化中实践"最小影响原则"。