网页视觉优化：7个被忽略的关键细节

　　去年二月份，凌晨三点二十，我盯着监控屏上那条平得像尺子量出来的FPS曲线，手抖着往泡面桶里倒第三勺酱油膏。值班室灯管滋啦响，空调冷气吹得后颈起疹子，窗外雨下得不痛不痒——那种南方特有的、能把墙皮泡软却死活不下大点的阴雨。

　　客服老张凌晨两点四十五分打来电话：“用户说字看着发虚，放大两倍就糊成一团，但测试机一切正常。”我没回他，挂了电话顺手把泡面桶推到显示器底下，怕汤溅到键帽缝里。这事儿不对劲——我们刚切完CDN，主站静态资源全走新节点，证书是上周续的，DNS TTL压到六十秒，连字体文件都做了子集化。可为什么用户一放大文字，整个页面像被水洇过的水墨画？

　　我原以为是font-display: swap惹的祸，结果查了七分钟发现是woff2里嵌了TrueType轮廓；又以为是Chrome 110对subpixel antialiasing的策略变了，可Safari和Edge也一样虚。最后蹲在devtools里放大再放大，终于看见那个被我们集体忽略的细节：font-weight设的是500，但实际加载的字体文件只含400和700两个字重——中间空了一档。浏览器硬生生把400“加粗”到500，再套一层模糊滤镜。这个我到现在也没想明白：为什么字体服务商打包时默认砍掉500？为什么本地调试永远用不到它？

　　监控屏右下角贴着三块蓝胶布，盖住去年五月被咖啡泼坏的像素点。我伸手抠了抠最上面那块，边缘翘起来了。这时候同事阿哲在运维群里甩截图：“CSS @layer顺序炸了，所有覆盖规则反着生效。”老板在下面回了个“？”——就一个问号，没标点，也没换行。我盯着那个问号看了四十来分钟，忽然想起上个月搬家，房东非说我家旧书柜压弯了地板龙骨，可我搬进来前那龙骨已经塌半边了。有些东西早烂透了，只是没人敢动第一块砖。

文章配图，仅供参考

　　第三个是图片srcset的坑。运营塞了张3840×2160的横幅图，配了srcset="a.jpg 1x, b.jpg 2x, c.jpg 3x"。问题在于——c.jpg只有1920宽。设备像素比3x的手机加载后自动缩放到1280宽显示，可浏览器先按3840解码，再丢弃2/3像素，内存峰值飙到400MB，页面直接卡死。昨天我查log，发现有台iPhone 13 Pro连续触发了五次OOM回收，而监控只报了“JS执行超时”。谁会在意一张图干翻内存的事？我们忙着调WebSocket心跳包，调Redis连接池，调Nginx upstream timeout……就是没人去看assets目录里那张命名带“banner_v3_final_new.jpg”的东西。

　　还有一次，用户投诉按钮点不动。我远程连过去，鼠标悬停时按钮确实没hover态。检查代码发现：pointer-events: auto写在了伪类:before里，而before生成的内容完全遮住了button本体——但开发测试时用的Mac触控板没“悬停”概念，所以never failed。我们用trackpad点了三百次，全都成功，直到有个用户用蓝牙鼠标划过去，按钮纹丝不动。他截的图右下角显示系统时间：上午九点零七分，天气图标是个小太阳。而我的测试机桌面壁纸是深空蓝，从不开任务栏预览窗。两种世界，互不相通。

　　最邪门的是那个背景渐变动画。我们写了@keyframes bg-fade {0%{background:#fff} 100%{background:#f5f5f5}}，duration设2s，iteration-count:infinite。看起来很干净，对吧？可在某些Android 12机型上，GPU会把这段CSS当作“强制重绘信号”，哪怕页面完全静止——每秒触发12次layer合成。用户没刷网页，CPU却始终跑在85℃。这事儿是售后小妹发现的，她一边喂奶一边盯用户录屏，说：“妈的，这动画比我家娃还勤快。”我当场把animation写法删了，换成纯CSS变量过渡，热更新推上去三分钟后，告警归零。

　　现在想起来还是后怕。不是怕宕机，是怕我们每天花八小时调参、写SOP、做灰度，却任由这些毛细血管里的毛刺长成肿瘤。优胜劣汰？对，真正在淘汰的从来不是技术，是那些愿意在凌晨三点蹲在devtools里看一行字体轮廓的人。阿哲今早跟我说他女儿刚学会写“王”字，横竖撇捺，一笔不落。我说那你教她——字要站直，别斜；线要绷紧，别松；色值别抄错，十六进制少一个字母，就是另一个世界。

　　明天先把告警阈值调了。不是CPU，不是磁盘，是渲染帧率连续低于30帧超过十秒，立刻弹钉钉窗口，弹到老板手机锁屏上。别的，等雨停再说。

（编辑：站长网）

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