多媒体开发必修：视觉与速度双赢的网站设计法则

　　去年十二月，我蹲在客户机房里改 SVG 动画帧率，天花板漏水，一滴一滴砸在 APC 电源柜散热格栅上，噗、噗、噗——跟心跳不齐。不是节奏问题，是水滴偏左第三格，刚好避开温度传感器探头。我抬头看了眼，没擦。手还捏着那根被剪掉半截的 DisplayPort 线，铜丝翻出来，像刚拔完牙的牙龈。

　　王工蹲在我右边拧固态硬盘支架螺丝，拧三圈，松半圈，再拧两圈，又停住。他左耳戴着一只蓝牙耳机，但没开麦，光亮着蓝灯。我问他是不是在听《春日部防衛隊》主题曲，他没应，只把耳机取下来塞进工装裤后袋，动作很慢，食指蹭了下耳垂——那里有颗痣，我盯了十八秒，直到他忽然说：“这个 CSS Contain 配合 will-change，跑 Safari 16.4 就是废。”

文章配图，仅供参考

　　我原以为他是说渲染层崩溃，结果他掏出 iPad 展示：滚动时字幕轨道抖三帧，但背景粒子动画丝滑。不是卡顿，是不同步。我伸手划拉两下屏幕，指尖沾了点水汽，凉的。他立刻把 iPad 收回去，扣在折叠椅扶手上，椅面堆着半盒没拆封的麻油鸡饭，汤汁洇透纸盒底，晕成一小片深褐色。我没动那盒饭，但它一直在我余光里，边缘微微翘起。

　　“多媒体开发必修：视觉与速度双赢的网站设计法则”——这话我听见第三次了。第一次在腾讯会议里，讲师用 Figma 拖了个 Lottie 播放器控件，边拖边讲“感知性能”。我关了麦，切到终端敲 `chrome://flags/#enable-gpu-rasterization`，还没回车，讲师突然笑：“你们看，加载时加个微动效，用户就没那么焦躁。” 我点了暂停，画面定格在那个 2px 的环形进度条上，转得特别假。当时窗外打雷，整个机房空调停了五秒，嗡——声低下去，又猛地冲上来，像有人踩了一脚压缩机。

　　优胜劣汰不是口号。是上周三凌晨两点十七分，我们砍掉所有 `@keyframes` 的 opacity 渐变，换成 `transform: scale(0.99)` 做伪淡入，首屏加载时间从四百二十六毫秒压到二百零九。客户总监凌晨三点发微信说“感觉更轻快了”，但技术总监直接打电话过来：“你敢动 `will-change: transform`？那个 `z-index` 是靠它吊着的！” 我说我知道，我说我测过六种 stacking context 组合。他说：“那你告诉我，为什么 IE11 里 `mix-blend-mode` 叠在 canvas 上会抽搐？” 我没答。因为 IE11 已经没了，连 Edge Legacy 都灰了，但他手机相册里还存着一张去年三月拍的报错截图，文件名是 `IE11_crash_on_webgl_context_lost_20230315.jpg`，连日期都带中文冒号。

　　对，这个我敢打包票：只要你在 `scroll-behavior: smooth` 外套一层 `clip-path: inset(0)`，iOS 15.7 就会在视口滚动到底部前十五像素强制重绘。我试过十三次，每次重绘点都不一样，有时是第十四像素，有时是第十六，但一定在十五上下浮动。这个我说不准——为啥非得是十五？是硬件采样周期还是 WebKit 内部阈值？没深挖。隔壁桌老陈倒了杯枸杞茶，吹三口气，喝一口，茶包还在水里浮着，像艘没舵的船。

　　有天张婷来调试 Web Audio API 的 AudioWorklet，她耳机线缠在鼠标滚轮上，滚两下，线就收紧一圈。我帮她解开时看见她电脑屏保是《攻壳机动队》2045 版剧场版截图，少佐站在雨中，玻璃反光里叠着三行代码：`audioContext.suspend()`、`webgl2`、`#3a4f7c`。她没关屏保，就让那画面闪着，声音调大到七十一，刚好盖过机房空调啸叫。我们俩盯着那个反光里的 `#3a4f7c` 发了会儿呆。她说这颜色她调了四十七次。我说你上次调的色板我还存着，在 D 盘 /backup/old_pallets_2022/ 下，文件夹名叫 “别删”。她嗯了声，把枸杞茶杯推到我手边，杯底压着一张小票，印着“2023-12-08 14:22 云朵面包·西溪店”，糖分未添加，小票右下角画了个歪歪扭扭的闪电符号。

　　现在每天晨会开头，产品经理举着平板念 KPI：首屏 TTFB ≤一百五十毫秒，可交互时间 ≤三百二十毫秒，LCP 不高于三百三十毫秒。没人提 Lighthouse 跑分时自动开启的 `--headless=new` 参数会让 WebGL 初始化延迟暴增，也没人管视频海报图用了 WebP 后，安卓 Chrome 118 在低端机上 decode 时间反而涨了十九毫秒。这些事太小，不进 OKR，所以不算数。但我知道——上个月我们上线的交互动画里，那个飘落的樱花 PNG，其实是张被 `canvas.toBlob()` 压过两次的 JPEG，压缩质量设成 0.73，就为骗过 `accept="image/webp"` 的上传校验。这事没人签字，没文档，但服务器日志里留着 `X-Render-Origin: flower-fall-optimized-by-20231208` 的 header。

　　所以说它是优胜劣汰？对。不是淘汰差的，是淘汰慢的。淘汰来不及改的，淘汰没权限碰 CDN 配置的，淘汰忘了 `transform-style: preserve-3d` 会导致 `backface-visibility: hidden` 在 Safari 里吃内存的。淘汰所有以为“用户看不到”的人。包括我。上周五下午我把 `pointer-events: none` 加在全站遮罩层上，本意是提升滚动手感，结果埋了个坑：iOS 微信内置浏览器点不到下面的 ``。修了。用 `pointer-events: auto` 加 `z-index: 9999999` 盖过去。不优雅，有效。桌上那盒麻油鸡饭早冷了，汤结了层薄油膜，反光里能照见我右眉毛缺了一小截，像是被焊锡烫过。

　　今晚回去，我打算把 `IntersectionObserver` 的 `rootMargin` 从 `0px` 改成 `-100px`，先试三个页面。要是明天晨会没人提，我就当它过了。

（编辑：站长网）

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