从产品列表点进详情,看完再点返回,列表回到了顶部,筛选条件没了,滚动位置也丢了。用户会觉得网站“卡”,其实加载并不慢,问题出在浏览器没把上一页留在内存里,而是重新跑了一遍。
浏览器本来可以不用重新加载
主流浏览器的前进后退缓存(bfcache)会把离开的页面保存在内存中,用户点返回时直接恢复,不重新请求,也不重新执行脚本。对移动端用户来说,这种恢复几乎是瞬时的,比任何优化都有效。但它不是默认一定生效,页面做了某些事情,就会被排除在缓存之外。
最容易被忽略的是卸载监听
页面上挂了卸载事件的处理函数,浏览器就无法安全保留页面状态,干脆不缓存。这类代码多半是历史遗留:埋点统计、关闭提示、表单暂存。改成页面隐藏时处理,效果一样,也不会挡住缓存。
响应头也会一票否决
给整站设置了禁止缓存的响应头,尤其是带 no-store 的那种,前后退缓存同样不会生效。有的项目为了“防止看到旧内容”全局加了这个头,代价是所有页面都无法快速恢复。合理做法是只对涉及敏感信息的页面单独设置,其余交给常规缓存策略。
还有几种常见阻挡
页面里存在未关闭的长连接;卸载时发起同步请求;某些安全策略配置异常。这些情况不常见,但排查时要知道,否则会在业务代码里绕。
怎么确认有没有生效
在开发者工具里查看页面导航类型,或者用浏览器提供的缓存诊断面板,能看到这次返回是恢复还是重新加载,以及没被缓存的原因。先确认现象再改代码,比凭感觉调参数快得多。
恢复之后统计会失真
页面从缓存恢复时,不会重新执行加载流程,统计脚本如果只在加载时上报,就会漏计;反过来,如果脚本没判断恢复状态,又可能把同一次访问记成两次。处理办法是监听页面显示事件,判断是否来自缓存恢复,再决定是否补报。不做这一步,看板上就会出现莫名其妙的波动。
涉及个人信息的页面要谨慎
恢复的页面保留着上一次的状态,如果里面有手机号、订单信息,在共用设备上点返回就可能被旁人看到。这类页面可以排除在缓存之外,或者在页面隐藏时清空敏感区域。体验和谨慎之间要按业务判断,不能一刀切。
小结
返回要重新加载,多半不是服务器慢,而是页面被排除了缓存。先查卸载监听,再查响应头,然后看统计与敏感信息,顺序清楚,改动也不大。冉冉科技在前端性能排查中,会把这一项与首屏指标分开评估。
关于冉冉科技
江苏冉冉信息科技有限公司(品牌“冉冉科技”)成立于2017年,位于江苏省常州市新北区,是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等,以“只做有效果的网络营销”为服务主张,累计完成三千余起网站建设与服务。

冉冉科技

商务咨询