动态资源加载慢？5个被忽视的优化点提速300ms

　　2025年5月，西溪路那间玻璃房会议室，投影仪一直嗡嗡响，像只卡在喉咙里的蜂——没人关，没人提，客户王总就坐在那儿转一支黑色中性笔，转得笔帽松了两次，啪嗒掉桌上，他捡起来继续转。

　　我说“动态资源加载慢？5个被忽视的优化点提速300ms”，销售老李当场拍我肩膀：“行啊老陈，这标题够劲！”——结果当天下午，甲方财务就把合同发过来了，预付款三千块，备注写：“先做出来看看”。我原以为是走个流程，结果真把后端接口都甩给实习生，前端堆了七层 Promise.then 嵌套，连 webpack 配置都没动，直接上 prod。

　　他们要的是“淘宝那样的”首页弹窗。不是效果，不是交互逻辑，是“那种一闪就出来的感觉”。我问要不要防抖节流、要不要预加载骨架图、要不要切片打标——王总抬头说：“哎呀，现在别管这个，先让它‘动起来’。”

　　动起来了。FMP 从1.8秒干到3.4秒。LCP 直接飘到4.2秒。我在控制台看着 Network 面板里那一长串 /api/v2/user/dynamic/…/feed?tab=hot&offset=0&limit=20 的重复请求，手抖着截图发群里，配字：“这不是加载慢，是自己往水里跳还嫌浪不够大。”

　　第一个被忽视的点：他们把所有动态组件的 loading 状态塞进一个全局 store，而每次 fetch 完，顺手 dispatch 了三次——一次清空，一次填充，一次触发渲染。其实只要改三行代码，用 Suspense + lazy 就能砍掉 120ms。但他们不认这个，因为“之前外包也这么写”。

　　第二个点：字体文件没子集化。整包 Source Han Sans CN 用了 12MB，实际只用到 23 个汉字。我提了两次，第三次开会，产品经理指着桌角那盘没人动的火龙果说：“陈工你看，这果子表皮红得亮堂，吃不吃得到无所谓，关键是‘有’。”

　　第三个点：CDN 域名硬编码成 http://static.abc.com ——而他们主站早就上了 HTTPS，混合内容被浏览器默默阻断三次，最后一次才 fallback 到降级路径。我没敢说“这是初中级错误”，只写了句注释：“建议改 scheme-aware”，然后被 QA 在 Jira 里标了个“低优”，拖了两周没动。

文章配图，仅供参考

　　第四个点最绝：他们把所有用户行为埋点逻辑，全裹进 useEffect 里，且每个 effect 都带个 [] 依赖数组——结果页面一刷新，所有 PV、UV、停留时长、点击坐标全丢，连“是否看过广告”都测不准。但王总坚持：“数据是给老板看的，老板看不懂细节，只要总数涨就行。”

　　第五个点……算了，第五个点是我自己手贱。我把预连接 prefetch 放到了 header 里，可他们 nginx 配置漏了一条 proxy_buffering off；结果所有预连接请求在网关层被缓存半秒，越 prefetch 越慢。查了八小时，最后发现是服务器日志里一条 warning 没人扫——“upstream sent too big header while reading response header from upstream”。我删掉 header 里两行无用的 X-Trace-ID，300ms 回来了。他们说：“哦，那下次也加进去？”

　　电梯里撞见前一个客户张工，他头发剪短了，左手无名指多了圈戒痕，说刚结清尾款——拖了两个月，最后一千八百块是微信转账，备注写：“辛苦，多谢不催”。我笑了一下，没接话。他比我早入行三年，去年还跟我吐槽“现在改个颜色都要加钱”，结果今年自己开了公司，接单只签一口价五万起，合同第七条加粗：“禁止口头需求”。

　　他们上线那天晚上九点零七分，我回一条微信，拆成了三步：打开对话框→删掉“测了三轮，300ms 不是吹的”这句话→敲“已上线”。然后盯着输入框下面那个“对方正在输入…”转了四十二秒，终于灭了。没等来下一句。第二天早上九点，运营发来截图，说“弹窗延迟太明显，用户没等到就划走了”。我截图发过去，附一行：“你们自己数下 network 里 7 个并发 fetch，其中 4 个超时重试。” 没回。

　　我真信过“先做出来看看”后面藏着迭代空间。结果那版上线三天，他们追加了六次需求：换 logo 角标、加分享浮层、兼容鸿蒙 Next、隐藏底部导航栏、接入新 CRM 接口、把首页推荐算法换成人工运营位——全是“小调整”。最后一个加进来的是“要源码”，理由是：“以后想换个外包方便交接。” 我交了，连 git log 都保留着，commit 里写着“hotfix: remove useless console.log in feed-loader.js”。他们打开后问：“这个 log 是干嘛的？” 我说：“提醒你们上次测的时候没清缓存。” 无人应声。

　　所以“优胜劣汰”这话，我现在信一半。优的不一定是技术，是报价够高、语气够横、合同够硬；劣的也不是代码，是敢说“这个不该你做”的人。我们这种做栏目的，常被当装修队使唤——客户觉得导航就是几块瓷砖，铺平就行，谁在乎底下钢筋弯了几度、混凝土标号多少。可瓷砖翘边那天，第一个打电话来的永远是他。

　　下回合同里，“禁止在未提供完整接口文档前提下启动动态模块开发”这条，必须写死，加粗，单独一页，按指纹。

（编辑：站长网）

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