网站视觉与性能的20年平衡术

　　跟产品吵。去年春晚那晚，我蹲在运维台后面啃冷馒头，PM第三次推门问“动效加载完没”，我说“动效早没了，只剩个骨架在Lighthouse里喘气”，她转身就发了封邮件抄送CTO说“前端交付阻塞创意上线”。

　　我原以为能靠把首屏SVG转成内联base64扛过去——结果CDN缓存没刷干净，灰度那批用户看到的还是上个月的图标字体，字体加载失败后CSS里的`font-display: optional`直接把整个导航栏render成透明块。没人报，因为没人点得进去。我盯着那个半透明菜单看了四十二分钟，直到后端老张端着保温杯进来，往我桌上放了包湿纸巾，说“你键盘上沾了芝麻酱”。

　　这个我敢打包票：优胜劣汰不是选出来的，是卡死出来的。去年春晚之前，我们还在用Webpack 4配DllPlugin，搞了个巨厚的vendor.js，三百七十二 KB，gzip后八十六 KB——但你猜怎么着？那年所有压测平台跑出来的LCP都在1.8秒以内，因为所有人默认开着Chrome的“模拟3G+高CPU限制”，而真机上连iPhone 8P都懒得触发JS parse。所以那版首页活下来了，不是因为它快，是因为它“看起来没崩”。

　　对面工位的前端小刘换了一根红色Type-C充电线，插在MacBook上嗡嗡响。他下午三点把一个交互动画帧率从30调到24，说是“更顺滑”，结果除夕凌晨一点二十三分，监控告警跳出来：白屏率从0.07%飙升到19.4%，源头是那串被他手写`requestIdleCallback`包装的、本该做懒加载的icon解码逻辑。他没加try-catch，一崩全崩。我截图发群里：“Lighthouse跑分92分截图在此”，没人回。十分钟后他自己补了个PR，标题叫“修复动画抖动”，描述里一句没提白屏。

　　性能和视觉的平衡术？呸。就是谁先跪谁先删。十年前砍掉Flash轮播图是后端拍板的，因为他发现每多一个SWF请求，DB连接池就漏一次；五年前干掉Canvas粒子背景是测试同学举报的，她在地铁里刷我们的H5，手机发烫到贴脸疼；去年删掉那个“雪花飘落”的WebGL特效——是我亲手在预发环境按的删除键，就在我看见PM把设计稿里的“飘雪”改成“轻雾”之后第三分钟。她没说为什么，我就知道是法务查到了Three.js的MIT license声明里带了一行“THE SOFTWARE IS PROVIDED ‘AS IS’”，而春晚赞助商合同第十七页写了“一切呈现须具确定性与可控性”。

　　桌面那个没关的录屏还在跑，窗口缩在右下角，显示着我昨天调WebWorker线程数的日志滚动。中间有一段空了十八毫秒，我截过图但没存——那会儿正好在跟老板拍桌子，说不能让设计师改动效参数像改Excel单元格一样直接填进Vite config里。他说：“你能不能别总盯着技术债？”我说：“我盯的是昨天下午三点，用户在直播间抢红包时手指划过屏幕却没触发出点击态反馈——那不是bug，那是时间感知断层。”他愣了一下，转身去倒水，接水壶的时候碰到饮水机左下角那个松动的塑料盖，啪一声掉了，滚到我拖鞋底下。

　　再说个反常识的：越想稳住视觉，越容易栽在性能上。今年三月有个A/B测试，把按钮微交互动效从`transform: scale(0.98)`改成`scaleZ(0.98)`，视觉几乎看不出差别，但Safari iOS 16.4下连续点五次必触发渲染层重合成，导致TBT暴增。我们复现了三十七次，每次都卡在第四次点击之后，第五次还没按下去，进程就被系统kill了。但没人提这事，因为数据报表里“按钮点击成功率”还是99.2%，他们只采了API返回200的量，没算前端JS执行失败却被`catch()`兜底吞掉的那些。这种细节，不录屏根本抓不到。

　　我手机现在还留着一张照片：春晚零点前五十分钟，我们四个凑在会议室白板前，用马克笔把“雪花动效”三个字框起来打了个叉，旁边写着“降级为CSS渐变遮罩”。底下一行小字是后端写的：“已确认Redis缓存策略不依赖客户端时钟同步”。我没拍白板上另外两行——一行是PM潦草写的“保氛围”，另一行是我补的“保命”。

　　说到CDN账单……算了，不说了。上季度多花了两万三，就因为开了Brotli+ZSTD双编码支持，想兼顾老旧Android和新iOS，结果发现92%的流量其实只认gzip。但这事儿跟视觉性能平衡没关系，纯粹是我们没管好边缘节点配置。你要是真想听，等下次故障复盘会上我再掰扯。

文章配图，仅供参考

　　所以我现在改规矩了：所有视觉需求提上来，先问一句“这效果，在低端机息屏唤醒后立刻滑动，能否保证首帧不撕裂”。答不上来的，直接标黄挂起。答得上但没给设备型号列表的，归入“待验证”。答得上且列了三台真机测试截图的——我亲自跑一遍WebPageTest，但只跑一次，不反复测。因为测多了，人就信假数据了。我见过太多人对着Waterfall图说“这里优化空间很大”，转头却发现那个HTTP/2 push其实是被Chrome 98以上版本静默禁用了。

　　今晚值班表我排好了：两点到四点我守着，三点十五分准时重启一次静态资源CDN的健康检查脚本——就那个总超时但没人敢动的Python脚本，运行时桌面上会弹出个无标题窗口，持续四秒，然后消失。它不解决任何问题，但我不关它，因为上回关了，紧接着LCP监控就开始漂移。我说不准这是不是心理作用，但今年我先信四秒。

（编辑：站长网）

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