建站资源优化实战：首屏快3倍，存储省70%

　　去年高考期间，我蹲在IDC三号机房角落啃冷掉的韭菜盒子，盒盖上还印着“新东方×XX中学冲刺营”——这玩意儿根本不是给我们吃的，是给巡检系统刷埋点用的测试物料，结果被老张顺手塞给我了。他刚挂掉电话，左手小指还勾着耳机线晃了三下，说“前端把webp全切了，你盯着CDN缓存策略”。

　　我原以为就是改个Content-Type头、清几遍缓存，结果打开DevTools一看：三百七十二个请求里，二百零六张图还是JPEG，其中一百一十四张宽高属性写反了，浏览器边解码边重排，首屏水印动效卡在0.32秒那儿不动，像卡带。而运营在钉钉群里发语音：“杨工您看下首屏能不能压到三秒？”她后面跟了个小太阳表情，手机型号是Redmi Note 9——这机子去年高考查分时连微信视频都打不出绿屏，现在倒要测LCP。

　　老杨那天下午穿了双灰蓝色洞洞鞋来，左脚后跟磨脱了一小块皮，走路拖沓带响。他站在我身后两米远，不碰键盘，只用下巴指屏幕：“你看这张banner图，srcset里写的1.5x源，实际是2x尺寸，但分辨率标成1.5x——你猜Chrome怎么干？它信标签，硬缩放，再加一层GPU合成层。”我回头想点头，他鞋带突然散了，弯腰系的时候，我听见他嘟囔：“又不是没报过bug，V8 112版本解析srcset有坑，上周五晨会我说了三遍。”

　　机房空调嗡嗡响，但最吵的是B2列机柜顶部那个漏风的风扇，转速不稳，“咔…咔…咔…”每三秒一顿，跟我们监控大盘上LCP曲线抖动频率几乎一致。我调出对象存储的AccessLog，发现七月四日十七点二十三分那波突增流量，不是用户行为，是运维小王手动触发了S3的Lifecycle规则——他以为能自动删掉七天前的asset-v1.2.3.js.gz备份，结果规则里写的是“删除所有含v1..js的文件”，于是连带删掉了当前正在灰度的v1.3.1.min.js.map。线上没报错，因为sourceMap本就不该上生产。可问题是你debug时找不到断点啊。我就在这事发生后第二天，才看见他坐在我隔壁工位剥橘子，掰开一瓣，搁嘴里嚼得特别慢，汁水顺着指尖滴到键盘右下角空格键缝里，没擦。

　　建站资源优化实战：首屏快3倍，存储省70%——这话我敢打包票站得住，但它站住的方式特别脏。不是靠算法多牛，是活人筛出来的。你删掉那批PNG，换成AVIF，iOS16以下直接fallback回JPEG；但你删掉那一千八百多个废弃SVG sprite symbol？没人敢动。因为去年十一月有个埋点图标没显示，排查三天，最后发现是某页底部引用了早已下线的icon-sprite.svg#share-btn——这个hash锚点还活着，它只是没图形了。所以优化从来不是技术决策，是政治清算。谁当年写的谁留着，谁跑路了，那部分就变“古迹”，谁动谁背锅。

　　我们压测那天窗外在下雨，雨刮器节奏乱了，噼啪噼啪砸在玻璃上。李工在对面隔间突然喊了声“卧槽”，不是惊呼，是喉咙里挤出来的一声闷响，像被什么卡住了。后来才知道他误点了灰度开关，把优化后的静态资源路径推给了全部安卓端——结果低端机全白屏，因为Service Worker缓存了新的manifest.json，但fetch不到对应的新JS Chunk，连error边界都没兜住。他当场重启了本地开发服务，电脑风扇狂转，吹得桌上那张高考考点分布图飞起来半边，粘在了空调出风口下面，颤巍巍晃了十分钟。

　　说回70%存储节省——其实是把旧项目里十八个重复打包的lodash-es模块全抽成CDN外链，但外链地址是公司私有CDN，没加Integrity，没配Subresource Integrity。上线第七天，某台边缘节点同步失败，返回404，但HTTP状态码写成了200，前端直接执行了空响应体……这事我没写进报告。写了也没用，上季度末安全组还在争论要不要给CDN加SRI，争论焦点是“如果CDN被劫持，用户执行恶意代码的风险，和运维半夜被call醒处理缓存不一致的痛苦，哪个优先级更高”。老杨那天没参与，他正帮实习生调Safari 15.6的CSS @layer顺序兼容性问题，戴着降噪耳机，耳机灯是蓝的，亮得扎眼。

文章配图，仅供参考

　　哦对，韭菜盒子最后一口我咽下去的时候，听见小王手机响，来电显示“老妈”，他接起来只说了句“嗯…挂了”，然后继续敲键盘。我数了下，他敲了十七下，全是Backspace。

（编辑：站长网）

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