14年运维老炮儿：动态页游客户端帧率瓶颈重构实录

　　去年六月，客户推门进来的时候西装领带，拎个黑色帆布包，里头装着台二手MacBook Air——屏幕右下角贴了张黄色便利贴，写着“淘宝同款”。销售在门口拦我：“王哥，就一小时，技术侧听听需求。”我点头，转头看见会议室投影仪嗡嗡响，像台快散架的蜂鸣器。

文章配图，仅供参考

　　客户坐下没先说帧率，先掏出手机划拉三下，点开一个叫“欢乐捕鱼HD”的页游，音效还开着，“砰！哗啦！”他手指悬在半空：“这个，我们要比它丝滑。做个淘宝那样的。”我说淘宝是电商不是页游，他笑：“意思到了就行。”桌上那盘切好的哈密瓜没人动，瓜皮上水珠往下滚，滴进塑料托盘里，啪嗒。我原以为是个老项目优化，结果打开他们发来的包——全量JavaScript打包才1.2M，但每帧重绘都触发四次DOM重排，还用requestAnimationFrame裹着setTimeout递归调用，像拿牙签撑豆腐房。

　　销售坐我左手边，转笔转得飞快，塑料笔壳咔咔响。客户第三句是：“预算三千。”我手抖了一下，茶水泼在键盘F键上，湿漉漉粘着。他接茬极顺：“先做出来看看。”这句话我听过八百遍，每次听都像听见棺材板上钉第一颗钉子。我点头，没吭声，因为知道这仨字后面跟着的永远是——上线前加个“微信分享浮层”，上线后要“包App Store排名前三”，上线第二天打电话问：“王工，为啥iOS端跳帧？我侄子用iPhone 12测的，他说卡。”

　　我们改了三次渲染管线，把Canvas 2D切到WebGL，加了离屏缓冲，又砍掉所有CSS transition动画。测试机跑满帧，60fps稳如老狗。客户来验收那天，带了个戴眼镜的年轻人，说是“新来的运营同事”，一进门就摸出自己手机连Wi-Fi，登上去点“每日礼包”，弹窗闪了两下没响应。他抬头问：“这个能加个倒计时吗？”我嗓子眼发紧，说：“加可以，但得改状态管理器。”他摆手：“就三秒，写死就行。”我盯着他袖口沾的半粒芝麻，没接话。销售还在转笔，笔尖断了，他换了一支，继续咔咔。

　　改颜色还要加钱这事，真不是段子。第七次UI调整，美工把按钮蓝改成#3A86FF，客户微信留言：“王工，这个蓝不够贵气，换成#4CC9F0。”我回：“换完要测所有状态下的hover/focus/active伪类兼容性。”他回得更快：“就换色，其他不管。”结果上线当天，IE11用户点按钮直接白屏。售后群里刷屏“打不开”，我凌晨三点蹲着查，发现是那个#4CC9F0在IE里被解析成透明值，而整个按钮的visibility逻辑是靠它反向驱动的。我删掉那行CSS，用rgba(76,201,240,0.99)硬顶，问题没了——但没人提这事儿，就像没人提电梯里撞见的甲方副总，西装裤腿蹭着灰，手里捏着半包中南海，看我一眼，又低头按电梯下行键。

　　尾款没结。就半句带过：发票开了，合同写了“验收后十五工作日”，拖了两个月。不扯法律，就说一句——他们财务系统里这笔款挂在“待补充材料”栏，而所谓材料，是“源码+部署文档+所有第三方SDK授权证明”。可当初合同压根没写源码交付条款。我翻聊天记录，客户最后一句是：“王工，技术无非就是干活，要那么多条条框框干啥？”我说：“您说得对。”然后真就把Git仓库权限开了，连同CI脚本、测试账号、甚至本地调试用的Mock数据JSON文件，全扔过去。他回复一个笑脸表情，再没下文。

　　上个月我撞见前年另一个客户，做“元宇宙宠物社交平台”的那位。他们连宠物尾巴摇摆角度都要A/B测试，但服务器用的是阿里云共享型ECS，一到晚上八点，用户喂食动作全部延迟三秒。客服电话被打爆，运营半夜发语音给我：“王哥你快来看看！狗在屏幕里追自己尾巴追了二十分钟没停！”我连进去看，发现是WebSocket心跳包丢包后，前端自动重连逻辑写成了无限递归setInterval……最后查出来，问题根因是他们采购部买的域名DNS解析用了免费的Cloudflare套餐，缓存TTL设成了300秒。我就问一句：“你们买服务器的时候，有没有人告诉过采购，别买‘共享型’？”没人答。我喝光了纸杯里的凉茶，杯底茶叶渣浮着，像一滩褐色淤泥。

　　优胜劣汰？我早不谈这词了。现在只信两件事：一是需求越模糊，付款越拖；二是凡说“就改一个小地方”的，必藏着三个埋雷点。这次亏在哪？亏在没拦住销售把“支持WebGL 1.0+”写成“适配主流浏览器”，结果对方拿Opera Mini来验；亏在答应了“三天内出首版Demo”，结果他们美术稿第八天才给齐，还是PSD分层错乱版；最亏的是——我亲手把重构后的渲染循环拆成五个模块，标好注释，发过去当晚，对方技术对接人回：“王工，能不能打包成一个js文件？我们CDN不认多文件加载。”我盯着那条消息看了两分钟，点了删除草稿，重新发了个单文件压缩包，末尾加了句：“已合并，含source map。”他回了个OK手势。

　　下回合同里这条必须写死：“任何UI微调（含颜色、字体、圆角、阴影、动效时长），无论是否声称‘极其简单’，均视为新增需求，需另行签署变更单并预付费用。”不是为钱。是为少听一次“王工，这个蓝色我们老板觉得还不够贵气”。

（编辑：站长网）

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