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

　　去年秋天，我蹲在测试机前盯住那个瀑布流加载动画——第三屏刚滚出来，CPU就飙到八十七，手机背面发烫得能煎蛋。主编微信弹窗：“视觉组说这动效‘有呼吸感’，你给它续命。”我盯着那行“加载中…”的 SVG 骨架屏，手抖着把 transition-duration 从三百七十二毫秒砍到八十八，删了两层 CSS filter，又把 IntersectionObserver 的 threshold 从零点一拉到零点三五。结果？首屏快了，但用户划到第五屏时，骨架屏直接闪退成白块——不是崩溃，是 DOM 里压根没挂载上去。

　　我原以为只要扛住审核就行，结果运营端口同步甩来一条：专题排期表里第十七栏标红写着“必须带微交互热区”，底下还手写补了句“李哥说甲方看了 Demo 说像十年前淘宝首页”。我抄起保温杯猛灌一口，水溅到键盘上，Ctrl+S 按出残影。打印机卡纸了，就在茶水间门口，没人去抽——张工端着麻辣香锅进来，塑料盖子还呼呼冒气，他筷子尖挑起一根豆皮晃了晃：“你那个轮播图，上周四下午三点二十停过两秒，监控里看的。”

　　空调滴水声又来了，滴、滴、滴，节奏准得像在打拍子。我就纳闷，为什么每次改动效都要先过原创度检测？那个检测器根本不管你是用 WebP 还是 AVIF，只认 HTML 里 class 名字有没有重复上个月某篇爆款里的词。上回我把 .card-shadow 改成 .card-elevation，系统判低原创；改回 .card-shadow，又提示“疑似搬运历史版本”。我跟审核后台吵过三次——第二次我录了屏，导出 MP4 时顺手压缩成 1280×720，结果视频里我的鼠标光标一闪就没，因为帧率被硬砍到十八秒一帧。这个我敢打包票。

　　赵姐来过两趟，第一次坐我工位边啃苹果，咔嚓咔嚓：“标题党那套早废了，现在连伪原创都要带情绪颗粒度。”第二次她拎着U盘来，里面存着三十四个“日更指标失败案例”的截图，最上面那个标题是《震惊！浏览器渲染线程竟会梦见CSS Grid》，点开正文只有三段话，其中两段是采集来的知乎高赞回复，第三段是我手写的报错堆栈——被毙了。就半句：“这个选题，编辑KPI对不上。”

　　王工敲我桌面，小动作，指甲盖在金属框上磕出轻响：“你试试把 LCP 元素从 img 换成 picture？”我没搭理，翻出上周的包体积报告——vendor.js 里塞了三个不同版本的 Lodash，两个没调用，一个只用了 debounce。我说不准是不是 build 工具自动合并的，但我知道那天凌晨三点，webpack 那个 warning 提示里写着“export ‘default’ (imported as ‘_’) was not found in ‘lodash’”，而我正把“转载授权”邮件里的“请于48小时内确认”复制粘贴进钉钉群，忘了改称呼，发成了“亲～”。

　　微信又弹了个群消息：【视觉-性能对齐会延后】。底下是设计师发的 GIF，九百二十三帧，十六兆，加载时进度条卡在百分之七十八不动。我点开 GIF 帧信息，发现第412帧到第415帧全是空白——不是透明，是#FFFFFF纯白，每帧占六千一百二十四字节。这个我敢打包票。

　　优胜劣汰不是口号，是服务器告警短信半夜震醒你时，你看清那个错误码的瞬间：ECONNRESET 不是因为网络，是 Node 进程撑不住并发渲染，而你昨天还在改 header 的渐变色值，从 #f0f9ff 调到 #e6f7ff，理由是“提升视觉信任度”。扯淡。信任度？用户连第三屏都没看到，页面就跪在滚动条三分之二的位置。我们不是在做产品，是在给规则缝补丁，补到线头都发毛了，还要笑呵呵交差。

文章配图，仅供参考

　　我今晚回去试试手写一个 requestIdleCallback 封装，不引入任何库，就三十五行，跑通再说。要是还崩，就把那个骨架屏换成静态 div，背景色写死，不带 calc() 不带 var()，也不管它漂不漂亮。先让它活着。再活一周，等下个排期。

（编辑：站长网）

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