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

　　2025年6月，凌晨两点零七分，IDC机房空调突然停了十五秒——不是告警，是监控没采到，值班同事小陈边啃冷掉的葱油饼边盯屏，饼渣掉进键盘缝里，我伸手拍了拍他肩，他头都没抬。这事儿跟动态资源加载慢没关系，但那晚我们三个盯着同一个首屏加载瀑布图，眼睛都快盯出红血丝了。

　　第一个人是老张，穿灰格子衬衫，袖口磨毛了，他蹲在机柜前拿热成像仪扫CDN节点，测了三遍，说“链路没瓶颈”，说完搓了一下手指，指甲盖上还沾着半粒没抖干净的咖啡渣。我信他一半。第二天早上八点二十三，他改口说“maybe TLS handshake被拖住了”，然后把工牌往桌上一扣，去冲第三杯速溶。这事儿我没追，因为当时我就在想：我们连prefetch和preload混用时HTTP/2优先级怎么崩的都没理清，先扯TLS？

　　第二个是实习生小吕，戴蓝框眼镜，总在笔记本左下角画小猫爪印。他提了个PR，把所有动态import()包全换成import('./x.js').then(...)——没加catch，也没等window.load。上线后30%用户白屏十七秒。我原以为是他没处理top-level await，结果查了一小时，发现是Vite打包时生成的chunk name带了hash，但预加载link里写的是静态路径，缓存失效又没fallback。这事儿我说不准，毕竟我没看他本地dev server配没配base。但他写的那个错误日志埋点，倒真跑出了三百七十二次404，其中一百六十八次来自安卓 WebView 83.0.4103.106——这个我敢打包票，日志里明晃晃写着userAgent，不是猜的。

　　第三个是运维组长老周，总在工位喝枸杞菊花茶，杯子沿上一圈茶渍。他前天开会拍桌子说“DNS预解析必须开”，结果昨天自己脚本里写了fetch('https://api.xxx.com')但没配preconnect，浏览器默默重走了一整套DNS+TCP+TLS流程。这事我没当面说，只在他茶杯旁放了张便利贴，写“preconnect不是DNS pre-resolve”，底下画了个叉。他看见了，但没撕，也没碰杯子，只是把椅子往后一推，吱呀一声响，响了十八秒。

　　机器在响。不是风扇，是那台老ESXi宿主机，硬盘灯狂闪，但iostat看不出来——它就响，嗡嗡嗡，像有根线松了，你听十次，九次都觉得是幻听。我去年换过三次背板，最后发现是机柜底部一颗M3螺丝没拧紧，共振。这事儿跟资源加载无关，但它让我想起另一件：我们所有CDN配置都在用default origin timeout=30s，没人动过，直到上周四下午三点十一分，某个Region的origin集群突发5xx，超时直接卡死整个资源预取流水线。老张说“肯定要调短”，小吕写了个Ansible脚本准备改，老周拦住：“等等，先看log。”结果log里第一行就是“origin responded in 29.987s”——它不是挂了，它就是卡在临界点喘气。这种事没法优化，只能认命。

文章配图，仅供参考

　　但你说这就叫“优胜劣汰”？我不敢全认。就像上次我看到个失败案例：一个电商详情页，把所有第三方SDK全挪到DOMContentLoaded后载入，首屏快了四百二十毫秒，但分享按钮三天内掉了22%的点击率——埋点数据显示用户根本等不到它渲染出来就切走了。他们后来把分享SDK又挪回head里，加了个placeholder spinner，数据回涨，但首屏反而慢了。所以“快”和“用”，有时候不是并行优化项，是互斥开关。这事我说不准，也懒得再开case单。我桌上那盒荔枝还没拆封，塑料膜上全是水汽，不知道放几天还能吃。

　　我现在打算干件事：下周把所有动态import()的promise状态监听，替换成PerformanceObserver监听"navigation"和"resource"，抓出实际加载路径里哪一段卡顿最狠。不是为出报告，就为看看是不是真的卡在JS parse上。还是卡在某个模块eval里没释放的with语句。或者——就是那台响的机器，一直响下去，响到没人再去查它。

　　对了，刚才接到个电话，对方问“你们有没有遇到S3 presigned URL跨域导致prefetch失效的问题”。我没答。因为我记不清了，只记得上周五有个人用curl -I试了一百三十七次，最后一次加了-H 'Origin: https://xxx'才成功。这事儿不重要，删了也不影响意思。

（编辑：我爱制作网_沈阳站长网）

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