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

　　去年十月，改版上线翻车——不是挂，是慢得像在加载古籍影印本。PM 站我工位边嚼薄荷糖，屏幕右下角倒计时还剩四十七秒，她问“首屏能压进一白二吗”，我没抬头，手已经摸到键盘左下角那个卡了三年的 Caps Lock：按下去没反应，抬手又按一次，咔哒，灯亮了，但我根本没想开大写。

　　Chrome DevTools 开着 Network tab，Filter 里输了个 “webp”，结果出来三百七十二个节点——三百七十二？我原以为是资源链路太深，结果发现全是同一张 banner 图的十二种尺寸、七套裁剪逻辑、五套 lazy-load 触发时机，再加三套 fallback 的 jpg。后端老陈昨天还在 Slack 说“静态资源我全丢 CDN 了”，我截图发他，他回了个“？”后面跟一句“你清缓存了吗”。清了。清了三次。F5 键按下去、手指松开、听见键帽弹簧复位的轻微弹响、屏幕闪一下、再闪一下、第三下才真正重绘——抬手、按键、松手，就这三步，我数过，平均耗时八百一十三毫秒。

文章配图，仅供参考

　　我敢打包票，去年双十一大促前夜，我们压掉全部 CSS 动画帧率限制，用 will-change 强提层，结果 iOS Safari 16.4 在某款中低端 iPad 上直接 GPU 占满，用户划到底部时整个页面反光成水波纹——但没人报 bug，因为没人往下划。测试环境跑分全绿，线上监控只报了两例“Long Task > 150ms”，归因到某个埋点 SDK，后端顺手把它从 vendor chunk 里拆出去了。拆完首屏快了十七毫秒，动画撕裂更严重了。我说不清这是优化还是埋雷。真说不清。

　　CSS 命名这事我现在随缘。前天 PR review，前端小李提交了一个叫 .section--hero-visual-variant-v3-alpha 的 class，我批注“建议改成 .hero-banner”，他回“设计师说 v3-alpha 要体现迭代路径”，我回“那 next 是 v4-beta 还是 v3-alpha-2”，他没回。我删掉那行批注，点了 approve。反正最后跑 CI 的是 Webpack 5.89，它不 care 你命名哲学，只认 export default。

　　优胜劣汰——这话听着像生态报告，其实就他妈是删需求。上上周，PM 推了个“粒子悬浮交互”，设计稿里三千个 canvas 小球实时响应鼠标轨迹。我蹲在会议室白板前画链路图，画到第三层开始抖，手心出汗。我说“不如先上个 hover 改 opacity”，她笑，“用户感知不到升级”。第二天晨会，她当着产品 VP 面说“技术方案暂未对齐”，散会后把我拉走廊：“客户刚追加预算，但得加 SLA —— 要求 LCP < 800ms”。我点点头，转身回工位，打开 Figma 插件查了查那个粒子动效的原型文件，发现里面写着“仅示意，非交付物”。哦。原来不是技术对齐问题，是交付物定义早被悄悄重写了。

　　工位右屏壁纸换过两次，一次是 KubeCon 摄影展打印的 node 红色 logo，胶带翘边；另一次是老婆拍的我家阳台猫蹲窗台的模糊抓拍，灰蒙蒙的，她说是“有氛围感”。我现在两个都没换，叠在一起——旧海报底下露出猫耳朵一角。键盘 Alt 键油得发亮，Win 键磨平了，Ctrl 有点松动，但最卡的永远是那个 Caps Lock，它不坏，就卡顿，像系统里一个活着的 bug。

　　我不信什么“性能可视化平台”能救场。上个月数据中台推了个新大盘，说能“精准定位渲染瓶颈”，我把我们首页 URL 扔进去，它吐出个词云：layout thrashing（占比 27%）、js parse（19%）、CLS（12%）……我盯着那个 27%，想起三天前凌晨两点，为绕过某个 UI 库里强制的 requestIdleCallback 而写的 setImmediate polyfill。代码只有五行，但它让 Chrome 以为自己在忙，于是真就不渲染了。我截图发给库作者，他回：“已归档至 v4 Roadmap”，链接指向一个 404。我截图发到内部群，测试小杨回：“所以明天上线要不要把那个 banner 暂时 static 化？” 我回：“先上。”

　　工资条上绩效系数涨了 0.08，HR 解释是“跨部门协同加分”。我猜是因为上周帮安卓 App 组看了眼 WebView 内存泄漏，他们那边 crash rate 降了 0.3%，换算过来值半张星巴克券。但今天中午外卖汤又洒了，这次在键盘托盘右侧缝隙里积了浅浅一层，我拿棉签捅了三遍，没全出来，现在 Shift 键按下去总带一点黏滞感。Shift。就是那个该死的 Shift。

　　网站视觉与性能的平衡术？十一整年，我没见过平衡，只见过撤退顺序。谁先让，谁后让，谁假装没让但偷偷改了接口语义，谁把动效 duration 从 300 改成 280 然后宣布“已达标”。优胜劣汰——淘汰的不是技术，是那些还坚持在交接文档里写“建议最大图宽不要超 1920”的人。我原以为自己会是最后一个，结果上个月发现 Git 提交记录里，我自己在两年前就悄悄把那个校验规则注释掉了。没删，就注释了。一行灰色字，连 commit message 都没提。

　　今晚下班前，我要把那张 banner 图的 srcset 里所有大于 1280w 的尺寸删掉。不管设计稿怎么说。先删。删完推 PR，标题写“【紧急】临时收敛图片策略”，不加描述。然后倒杯水，看它能不能不再洒。

（编辑：站长网）

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