网页加载慢？三步优化，游戏启动快如闪电

　　去年三月份，我蹲在西门子那间老机房里等CDN回源超时——天花板滴水，一滴、两滴，正砸在UPS散热口上，滋啦滋啦像在烤薄荷糖。老张突然推门进来，左手拎着半盒没拆封的肠粉，右手手机贴着耳朵：“对，缓存策略得重写……啥？你那边用的是nginx还是traefik？”他没挂电话，直接把肠粉盒子塞进机柜通风口下面，纸盒角都翘起来了。

　　网页加载慢？三步优化，游戏启动快如闪电——这标题不是吹，是优胜劣汰筛出来的尸堆上长出的蘑菇。我原以为改个HTTP/3+Qpack就完事了，结果凌晨两点在测试服里狂点F5，发现某张28KB的SVG图标居然是整个首屏blocker：它没设async，没加fetchpriority=high，更没走preload，就卡在后面第三行，像根生锈的钉子卡进流水线传送带。我盯着DevTools里那个红色“LCP delay”弹窗看了十八秒，窗外雨忽然大了，空调外机开始嗡嗡抖，跟上次地震前一模一样。

　　第一步，砍掉所有「假装在加载」的东西。比如那个叫“loading skeleton”的组件，美术说它转起来像银河系自转，前端说它用了requestIdleCallback+IntersectionObserver双保险。可我扒开它的CSS，animation-duration写着1.8s，duration一写死，浏览器就真信了——哪怕资源早下完了，它还得假装再转七百毫秒。那天小王一边啃烧卖一边改代码，油渍蹭在键盘F键上，他删掉animation-fill-mode: forwards，又手抖多按了个backspace，把整行@keyframes全删了。结果反而快了——骨架没了，DOM直接闪现。我愣住，他嚼着烧卖含糊说：“反正用户也不看‘假装加载’，他们只认‘东西出来了’。”

　　第二步，让游戏启动别演戏。我们之前给Unity WebGL包套了三层包装：先是JS Loader，再是加密解密层，最后才是wasm入口。用户点“开始”之后要等三秒才出现“正在初始化图形管线”，其实GPU早闲着刷微博了。我调出WebGLRenderer.debugInfo一看，ctx创建早在第一帧就完成了，只是被卡在await decrypt(unityloader.js)里。那天李工蹲在服务器机架旁接电话，听筒里断续传来：“……证书链没问题……对，就是那个中间CA签发的……”他边说边用指甲刮掉机柜侧面一块干掉的口香糖残渣，刮到第三下时突然抬头：“要不要跳过校验？”我没答，他直接拔掉自己笔记本的网线，把build目录拖进本地http-server跑起来——启动快了四百六十毫秒。不是优化，是作弊。可作弊赢了。

　　第三步，最绝的——把“慢”本身格式化。不是加速，是让慢变得不可见。我们把原来分散在6个JS chunk里的埋点逻辑，全塞进一个<script type="module">里，inline进HTML头部。编译后体积涨了三百七十二字节，但FP时间缩到0.7秒内——因为浏览器根本来不及触发TTFB超时就画出首帧了。不过上线当天运维老周骂娘，说监控图里出现一堆“JS parse timeout（uncaught）”，查日志发现是某个海外CDN节点把我们的inline script当XSS payload给拦截了，拦截返回403页面还带jQuery动画。他截图发群里时，手指还在抖，旁边显示器右下角时间显示04:13:22——这个我敢打包票，我看表看了三次。

　　说回优胜劣汰。上周看到新来的实习生提PR，要把首屏字体从WOFF2切回TTF，理由是“安卓低版本兼容性好”。我盯着他的commit diff，光标停在font-display: swap那行不动。他说：“老师，TTF比WOFF2小2KB。”我点头。他松口气。我没说其实那2KB藏在gzip后头，而swap触发时机被我们去年六月用ServiceWorker劫持了两次，现在字体下载根本不在主路径上。这事我说不准——我连上个月哪个CDN节点偷偷开了Brotli预压缩都不知道。

　　对了，那天下午三点，空调停了十五分钟。机房热得像蒸笼，所有人脱了外套挂在机柜门把手上，衣服颜色混在一起：藏青、灰蓝、一件起球的米白卫衣。没人去碰服务器，就听着风扇狂转，像一群困在铁盒里的黄蜂。有人开了瓶冰啤酒，罐底凝的水珠滴在UPS面板上，发出“嗒”的一声。这时候小王突然问：“如果根本没人打开那个页面呢？”没人接话。他笑着把空罐捏扁，丢进垃圾桶——哐当一声响，盖过了所有风扇。

文章配图，仅供参考

　　哦，肠粉凉透了，纸盒被水泡软，塌成一小团，还在我脚边。我踢了一脚，它滚到PDU电源线底下，不见了。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!