频道web - 性能优化之往返缓存

发布于:2024-12-18 ⋅ 阅读:(14) ⋅ 点赞:(0)

最近参与了一个频道-web端项目(欢迎大家来体验),进入了性能优化阶段。发现一个之前没有映像的bfcache的lighthouse评分actionable。如下:
请添加图片描述

在解决问题之前,先来了解一下要解决的是什么

往返缓存简介:

往返缓存

总的来说,它是浏览器内置的功能,帮助我们服务开发者处理快速的前后路由切换的
对当前盛行的单页面SPA应用,虽然回退等操作原理不一样,但仍然有一定的作用,见
bfcache 和单页应用

如何验证当前页面是否有往返缓存?

测试往返缓存

有哪些开发场景可以用bfcache提升性能?哪些无需关注?

通常来讲,登录的动作是需要多窗口更新,无可避免的信息同步。但依然可以采取触发页面访问的时候再去刷新,带来较少的浏览器消耗。
除此之外,bfcache适用于场景内容重新刷新无价值、边缘信息无影响、一定单一访问/多窗口信息同步依赖刷新的网站或内容。比如:文案类型的详情页面、电商购物列表、电商购物车、基金详情页等;而
像互动社交平台类型,互动、设置等状态变化为首要信息 且 多tab之间有访问预览信息同步的内容平台反而需要尽早更新到最新内容,需要窗口间通信。

阻止页面进行往返缓存的行为都有哪些?

1、缓存

  • 缓存策略:
    如果服务器设置了缓存策略,但设置了 Cache-Control: no-cache 或 Cache-Control: no-store,浏览器将不会缓存页面,因此无法被缓存到 BFCache 中。
    但本身的no-cache不会触发bfcache的lighthouse评分,主动设置不缓存是合理的,只有代码未规范阻塞的才是可以改善的地方。
  • 缓存过期