H5空间存储扩容站：手机相册告别内存焦虑

　　去年双十一前夜，我蹲在搜狐焦点频道后台切H5专题页，机房空调坏了，风扇嗡嗡像拖拉机挂了二挡——就这声音，小孟端着杯冰美式进来，手抖得洒了半杯在键盘上，还说“姐你快看这个‘空间扩容站’动效”。

　　我原以为就是个带云图标的上传按钮，点开才发现是套嵌套iframe的离线包+Web Worker预加载混合体。结果点进相册列表页时，安卓WebView直接吐出个SecurityError：'Blocked a frame with origin “https://cdn.xx.com” from accessing a cross-origin frame'，而iOS真机上它又偷偷调了LocalFileSystem API——连自己都判不定该信哪个规范。

　　小孟蹲我工位边啃煎饼果子，葱花掉在鼠标垫上，第三口还没咽下去，产品总监老周电话就来了，说“用户心智是‘点一下变大’，别整那些异步loading态”。我说：“可它第一次触发要下载三百七十二KB的WASM解包模块。”他那边背景音是儿童钢琴考级录音，回得特干脆：“那就让它静默下。”静默？静默完点第四次才弹出授权框，前三次连touchstart都吞了。

　　最绝的是那个“告别内存焦虑”的文案按钮——它根本没绑定任何storage事件监听。我们抓包盯了十八秒，发现它只是把用户本地FileList塞进IndexedDB，再用fetch发到后端存个MD5校验码，压根没碰设备剩余空间值。但用户点完真觉得“腾出了12GB”，因为顶部状态栏写了句“已释放空间：11.8GB（估算）”，括号里那个“估算”字号比主标题小两号，还加了opacity:0.7。

　　那天下午三点十七分，运营部李姐推门喊“流量来了”，我抬头看见她左手拎着一袋刚拆封的暖宝宝，右手手机正挂着钉钉会议，耳钉晃得特别快。她话音还没落，前端监控告警炸了：Safari 16.4 on iPhone13上，`navigator.storage.estimate()`返回了个null，然后整个H5被try-catch吞了，白屏三秒后自动跳转到首页——跳转逻辑写在window.onerror里，但onerror本身又被Vue全局错误处理重写了两次。

　　其实真不是技术不熟。上季度末我们做过同样结构的“旧照片AI修复站”，那套WebAssembly编译链跑得比这个顺，就因为当年压根没接storage.estimate()，全靠后端返回伪数据兜底。这次非说“要真实感知”，结果真实感知到的是Chrome DevTools里Performance面板里那根锯齿状的内存曲线——它升到2.3GB突然断崖式掉到187MB，再升再断，像有人在反复拔内存条。

　　我原以为是PWA缓存策略冲突，重装了五次service worker，连sw.js里console.log(‘hi’)都加上了——结果上线三天后发现，那个‘hi’只在开发环境里打出来过，生产环境打包脚本把它整个if块删了，因为webpack.DefinePlugin设了个process.env.NODE_ENV==='production'常量，而‘hi’藏在if (DEBUG)里……调试开关关着呢。

　　后来查日志才发现，所有“扩容成功”埋点都打了，但其中七成发生在页面DOMContentLoaded之前。也就是说，用户还没看到相册缩略图，就已被判定为“已告别焦虑”。后台那个叫阿哲的运维哥，一边敲sudo rm -rf /tmp/cache/一边念叨：“你们前端真敢啊，把Promise.race([timeout(), fetch()])当loading spinner使。”他桌上外卖盒盖都没掀，辣子鸡丁凝着一层油膜，在屏幕反光里泛紫。

　　优胜劣汰？这话我敢打包票——但淘汰的不是方案，是提需求的人。谁定的“必须显示实时剩余空间”，谁拍板砍掉本地缓存检测，谁在PR Review里把checkStorageAvailable()函数标成“非核心路径”……这些名字我不能写，写了怕半夜收微信语音。不过你知道的，那种凌晨一点发来的“这个动效能不能再轻盈点”的留言，后面一定跟着一个未读红点，和一条撤回消息——我点开过，是“算了，明天晨会再说”。

文章配图，仅供参考

　　对了，小孟前两天在茶水间说，她们栏目组新上了个选题叫《折叠屏相册UI进化论》，我听见编辑总监在隔壁吼：“别扯技术，要情绪！焦虑感！治愈感！中间插个二维码能领1TB！”——当时微波炉正叮一声，我盯着转盘上那碗凉透的咖喱饭，酱汁已经干结出细纹。

　　这事没完。下周我们得把H5降级成纯HTML页面，去掉所有Worker、WASM和IndexedDB——就剩一个form表单，提交后跳转服务器生成静态页。简单，慢，但用户至少能看清自己点了什么。至于“告别内存焦虑”那句话……现在我改成了“点击即开始，等待中请勿关闭页面”，字体加大加粗，居中，底下配了个GIF——旋转的、像素风的、八帧循环的、不动的箭头。

（编辑：站长网）

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