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

文章配图，仅供参考

　　隔壁老张剁骨头剁得整块水泥地都在震，案板缝里嵌着三年前的姜渣，他刀一抬我就知道今天行情要跌。灯泡在晃，不是电压不稳，是铁丝挂得太松，晃了快半年，没人踩凳子去拧——你懂的，开档前三分钟谁顾得上这个。

　　五个点，没一个写在SOP里。第一，prefetch的资源路径里混进了环境变量，dev环境跑得好好的，上线后自动拼出个/user/api/v1//order（注意那个双斜杠），浏览器吭哧半天，最后静默失败，连错误都懒得报。我原以为是网络抖动，结果盯着控制台看了四十分钟，手上的裂口被咸水泡得发白，才看出URL里少了个冒号。返潮天，秤盘上沾的泥干成一圈灰边，擦都擦不掉，跟这事一样赖着不走。

　　第二，JSONP还没拆完。去年八月，二批老李带俩小年轻来挑货，站在我们摊前说：“你们前端还用callback=?”，我说“早换Fetch了”，他摇摇头，从兜里掏出手机翻他们系统源码——好家伙，三个接口还在用JSONP，其中一个连超时都没设。我当场哑火。后来查出来，光这一个接口，在弱网下平均拖了117ms。不是慢，是它根本不想回来，卡在pending里装死。

　　第三，图片懒加载配了intersectionObserver，但threshold写了0.3，结果用户手速快，手指一划，图片刚进视口20%，observer就触发了，紧接着三张webp同时解码，CPU直接烫手。收音机在放《穆桂英挂帅》，声音忽大忽小，像信号不良的对讲机——就跟我们那个解码队列一样，一会儿全挤一块，一会儿全卡住。泡沫箱上写着“宏达水产·青岛”，其实早转手三次了，谁还记得源头在哪。

　　第四，webpack splitChunks默认按函数名切包，结果所有页面都import了同一个工具函数文件，叫utils.js，里面塞了十七个没用上的方法。我们把其中八个砍掉之后，首屏chunk体积降了42KB，但真正提速的是——它不再跟主包抢IO调度了。地上那摊水一直没干，上周三拖的，周五还在，像某个永远清理不完的缓存目录。

　　第五，最绝的——我们在服务端开了Gzip，但忘了开Brotli。Nginx配置里注释写着#brotli off，真off了。上线仨月没人动它，直到某天老客王姐说“你家页面点一下要等半天”，我才顺手敲了curl -I，header里干干净净，没有br。改完当天，LCP降了98ms。不是技术多牛，是咱们集体失明三个月。

　　优胜劣汰？这话不是吹的。二批老李现在自己养了个前端小哥，天天蹲我们后台看埋点；我们原来那个外包，上周微信回我说“最近接单少了”，语气比返潮天的海带还蔫。市场管理处贴过两次告示，说“严禁私自加装高功率设备”，结果我们隔壁电鱼店照样接三相电，风扇转起来像台风眼——技术也是，你不动它，它就生锈；你一碰它，它就咬人。

　　说到王姐……她上个月买了二十箱冻蛏子，非要我们现剥壳再真空分装，剥到半夜两点，她拎着保温桶走了，留我在那儿数蛏肉碎屑。她今早又来，问能不能把loading图标换成她孙女画的螃蟹——我答应了，但没告诉她，那图标现在还卡在Webpack打包的asset manifest里，连路径都对不上。老客记性比我们都好，她记得我哪年哪月哪天少给了半斤虾皮，也记得我什么时候改过一个字节的响应头。

　　冷眼？我是真冷眼。上礼拜测速，新上线的资源加载曲线平得像菜刀背，300ms不是算出来的，是拿Chrome DevTools里Performance面板一帧一帧拖出来的。可你猜怎么着？运维同事说：“别优化了，老板觉得用户没投诉就是没毛病。”我说：“那要不要顺便把秤调轻两钱？”他笑了，笑完去喝咖啡，咖啡渍滴在监控大屏边缘，没擦。

　　老家那点事我就不说了——我爹种大棚，去年黄瓜滞销，堆在院子里烂了一半，他蹲在那儿抽烟，烟灰落进土里，跟我们那些没清理的console.warn一模一样，都是白费力气的痕迹。他没骂我，就说了一句：“货摆得再齐，没人来挑，也是压仓。”

　　所以现在我每天开档前，先做三件事：清一遍preconnect标签，扫一眼network里有没有404的preload，顺手检查nginx.conf里brotli是不是on。别的不敢说，至少让那300ms，别再从我们自己指缝里漏出去。

（编辑：航空爱好网）

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