机器学习驱动网站开发：特效与性能双赢

　　去年九月，凌晨三点十七分，我盯着控制台里那个跑歪的 attention mask——它本该在 scroll 到 72% 时淡出 header，结果在用户松开鼠标前一秒，硬生生把整个 LCP 拖成了三百七十二毫秒。王磊在 Slack 里发了个“？”加一个咖啡emoji，没说话。窗外在下雨，雨点砸在机房北侧那扇常年关不严的玻璃窗上，哒、哒、哒，像有人用指甲在敲三颗不同大小的螺丝钉。

　　我原以为是模型 inference 的 tensor shape 没对齐，结果追进 wasm bundle 一看，根本不是——是前端同学把 resize observer 和 predict() 放在同一个 microtask 队列里了，而 predict() 里那段 quantized softmax 后处理……它不阻塞，但它让 event loop 留了十五帧的空档。我敢打包票，那十五帧里至少有八帧，是浏览器在等一个永远不来的 requestIdleCallback。但谁还记得 idle callback 是干啥的？现在连 IntersectionObserver 都得配 debounce 才敢放 production。

　　张薇当时正蹲在茶水间修那个自动续杯机，水槽里泡着三只印着“AI 工程师·不许摸参数”的马克杯。她头也没抬，说：“你那个 model.onScroll 要不改叫 model.onSigh？反正人一叹气，scroll 就卡。”她右手拧着电磁阀螺丝，左手手机在震，接起来就讲：“对，GPU 占用率我看到了……不是显存爆了，是 thermal throttle，主板温感芯片贴错了位置，离散热片差两毫米。”我听完没回话，只把 Chrome DevTools 里 Performance 面板切到 Bottom-Up，又切回来，再切过去——切第三次的时候，发现 CPU 栏底下居然闪了一下 Python 进程名。不可能。可它闪了。

　　优胜劣汰不是玄学。就是你写五种 lazyload 策略，跑三天 AB 测试，其中两个直接把 TTFB 拉成瀑布流；剩三个里，有一个在 iOS 上永远多触发一次 prefetch，另一个在 Safari 16.4 下把 webgl context 搞丢两次，最后一个……它居然在 Firefox 里比原生 还快十六毫秒。但没人要它。因为它的训练数据里混进了十七张从某设计系统官网扒下来的 SVG 图标，带 inline CSS 和 comment——模型学得特别认真，把注释里的“// DO NOT EDIT”也当特征记了进去。上线前 QA 发现：每次用户 hover 在 nav item 上，控制台会打印一行 green 字——“DO NOT EDIT”。我们改了三遍 config 才压住。但这恰恰说明它活下来了：错得足够具体，错得没法抄。

　　李工上周四下午两点零四分推了一版新 feature，在 PR 描述里写“ML-boosted parallax with runtime fallback”。我点开 diff，发现他把 onIntersectionChange 的 callback 套进了 torch.jit.script 包装器里。不是 PyTorch，是 torch.jit.script。那个函数里只有 Math.sin 和 getBoundingClientRect。他甚至给它写了 @torch.jit.export 注解。我截图发群里，没人笑。王磊回：“跑通了。” 张薇回：“fallback 路径在哪？” 李工回：“没 fallback，万一 fail 就全屏 white。” 说完他切走了，桌上的外卖盒还敞着，酸辣粉浮着一层红油，上面插着一双没拆封的一次性筷子——塑料膜还在，筷子尖朝左斜三十度。

　　最搞笑的是那个 canvas blur 动效。我们试过纯 CSS filter，试过 offscreenCanvas render，最后拿了一个轻量 UNet 分支去预测高斯半径——只输入 viewport width、devicePixelRatio、当前 scrollY 和三个 DOM rect.left 值。它输出一个 float32。精度只要小数点后一位。模型体积 128KB，加载比一张 hero 图还慢，但 Blur radius 随手速变化的那个丝滑感……真他妈不一样。可你知道吗？上线第二天，运营说他们 A/B 里有个组点击率掉 0.3%，排查一圈，发现是那个 blur 让 button 的 shadow 变得模糊之后，CTA 文字在深色模式下对比度不够了。没人想到这个，包括做 WCAG 检查的自动化工具——它压根没把“动态生成的 blur 半径”算进 contrast ratio 公式里。我说不清这事怪谁，可能怪光。

文章配图，仅供参考

　　现在我桌上还摊着那张没吃完的酸辣粉盒子。红油干了，凝成一小片琥珀色薄膜，边缘微微翘起。我打算明天试试用 OCR 把盒底的生产日期识别出来，喂给一个极简 LSTM，看看它能不能学会预测——下次哪天会突然想吃这个味儿。要是准了，我就把它嵌进首页 footer 作为彩蛋。不准也没关系。反正 footer 本来就没人在意。

（编辑：站长网）

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