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

性能优化之往返缓存

  • 往返缓存简介:
    • 如何验证当前页面是否有往返缓存?
    • 有哪些开发场景可以用bfcache提升性能?哪些无需关注?
    • 阻止页面进行往返缓存的行为都有哪些?
      • 1、缓存
      • 2、强制刷新
      • 3、浏览器设置
      • 4、JavaScript 代码
      • 5、网络问题
      • 6、 iframe 本身不符合 bfcache 的条件
    • 为什么会提示broadcastChannel和unload handler的往返缓存问题?
      • BroadcastChannel
        • 什么是“BroadcastChannel”?
        • 如何找到该监听器BroadcastChannel?
        • 新项目验证阻止往返缓存存在问题:
      • unload
    • 有哪些开发工具内置停用bfcache?
  • nuxt是否还有其他问题
    • usecookie bfcache fail 问题(已修复)
  • 很多开发者都推崇broadcastchannel的多窗口同步模式:

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

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

往返缓存简介:

往返缓存

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

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

测试往返缓存

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

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

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

1、缓存

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/889294.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java+springboot+mysql法律咨询网

项目介绍: 使用javaspringbootmysql开发的法律咨询网(文书),系统包含管理员、用户角色,功能如下: 管理员:登录系统;用户管理;文章管理(法律知识&#xff09…

SpringBoot【十】mybatis之xml映射文件>、<=等特殊符号写法!

一、前言&#x1f525; 环境说明&#xff1a;Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 在利用mybatis进行开发的时候&#xff0c;编写sql时可能少不了>、<等比较符号&#xff0c;但是在mapper映射文件中直接使用是不行的&#xff0c;会报错&#xff0…

代理IP在电商数据爬取中的成本效益分析

在电子商务领域&#xff0c;数据的重要性不言而喻。它不仅关系到市场趋势的把握&#xff0c;还直接影响到产品定价、库存管理和客户服务等关键业务。电商数据爬取是获取这些数据的重要手段之一。然而&#xff0c;直接爬取电商网站数据可能会遇到IP被封禁、数据获取不全面等问题…

【MIT-OS6.S081作业1.3】Lab1-utilities primes

本文记录MIT-OS6.S081 Lab1 utilities 的primes函数的实现过程 文章目录 1. 作业要求primes (moderate)/(hard) 2. 实现过程2.1 代码实现 1. 作业要求 primes (moderate)/(hard) Write a concurrent version of prime sieve using pipes. This idea is due to Doug McIlroy, in…

linux 下硬盘挂载c

1. 检查硬盘的文件系统类型 确保你所尝试挂载的硬盘 /dev/vdb 上已经有一个有效的文件系统。你可以用 lsblk -f 令查看硬盘的文件系统类型。 lsblk -f2. 检查挂载命令的语法 硬盘已经格式化为 ext4 sudo mount -t ext4 /dev/vdb /data 确保你在挂载时没有指定错误的文件系统…

docker的网络类型和使用方式

docker的网络类型 5种网络类型 bridge 默认类型&#xff0c;桥接到宿主机docker0的网络&#xff0c;有点类似于VM虚拟机的NAT网络模型。 案例: docker run --rm -itd --network bridge --name wzy666wzy-bridge alpine host host类型&#xff0c;共享宿主机的网络空间&#…

C# 探险之旅:第二节 - 定义变量与变量赋值

欢迎再次踏上我们的C#学习之旅。今天&#xff0c;我们要聊一个超级重要又好玩的话题——定义变量与变量赋值。想象一下&#xff0c;你正站在一个魔法森林里&#xff0c;手里拿着一本空白的魔法书&#xff08;其实就是你的代码编辑器&#xff09;&#xff0c;准备记录下各种神奇…

URI 未注册(设置 语言和框架 架构和 DTD)

一、问题描述&#xff1a;在springboot项目中的resources中新建mybatis-config.xml文件时&#xff0c;从mybatis文档中复制的代码报错&#xff1a;URI 未注册(设置 | 语言和框架 | 架构和 DTD) 二、解决&#xff1a;在Springboot项目的设置->架构和DTD中添加 红色的网址&…

SSM 校园一卡通密钥管理系统 PF 于校园图书借阅管理的安全保障

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装校园一卡通密钥管理系统软件来发挥其高效地信息处理的作用&a…

在PowerShell下运行curl命令出现错误:Invoke-WebRequest : 无法处理参数,因为参数名称“u”具有二义性

今天在Windows 11下测试Nanamq的HTTP API&#xff0c;按照其文档输入&#xff1a; curl -i --basic -u admin:public -X GET "http://localhost:8081/api/v4/subscriptions" 结果出现二义性错误&#xff1a; 而且输入curl --help命令想看看参数说明的时候&#xff…

java配置多数据源

三个数据库&#xff1a;master主库、back_one从库1、back_two从库2 1.application.yml配置三个数据库信息 spring:datasource:driver-class-name : com.mysql.jdbc.Driver# 主库master:jdbcUrl : jdbc:mysql://xxx:3306/master?useUnicodetrue&characterEncodingutf-8&a…

视频推拉流EasyDSS无人机直播技术巡查焚烧、烟火情况

焚烧作为一种常见的废弃物处理方式&#xff0c;往往会对环境造成严重污染。因此&#xff0c;减少焚烧、推广绿色能源和循环经济成为重要措施。通过加强森林防灭火队伍能力建设与长效机制建立&#xff0c;各地努力减少因焚烧引发的森林火灾&#xff0c;保护生态环境。 巡察烟火…

K8S对接ceph的RBD块存储

1 PG数量限制问题 1.1 原因分析 1.还是老样子&#xff0c;先创建存储池&#xff0c;在初始化为rbd。 [rootceph141~]# ceph osd pool create wenzhiyong-k8s 128 128 Error ERANGE: pg_num 128 size 3 for this pool would result in 295 cumulative PGs per OSD (2067 tot…

React Router 6的学习

安装react-router-dom npm i react-router-dom 支持不同的路由创建 createBrowserRouter 特点 推荐使用的方式&#xff0c;基于 HTML5 的 History API。支持用户友好的 URL&#xff0c;无需 #。适用于生产环境的绝大多数场景。 适用 使用现代浏览器&#xff0c;支持 pus…

微信小程序web-view 嵌套h5界面 实现文件预览效果

实现方法&#xff1a;(这里我是在小程序里面单独加了一个页面用来下载预览文件) 安装 使用方法请参考文档 npm 安装 npm install weixin-js-sdk import wx from weixin-js-sdk预览 h5界面代码 <u-button click"onclick" type"primary" :loading"…

HTTP 状态码大全

常见状态码 200 OK # 客户端请求成功 400 Bad Request # 客户端请求有语法错误 不能被服务器所理解 401 Unauthorized # 请求未经授权 这个状态代码必须和WWW- Authenticate 报头域一起使用 403 Forbidden # 服务器收到请求但是拒绝提供服务 404 Not Found # 请求资源不存…

一文详解TCP协议 [图文并茂, 明了易懂]

欢迎来到啊妮莫的学习小屋! 目录 什么是TCP协议 TCP协议特点✨ TCP报文格式 三次握手和四次挥手✨ 可靠性 效率性 基于字节流✨ 基于TCP的应用层协议 什么是TCP协议 TCP(传输控制协议, Transmission Control Protocol) 是一种面向连接的, 可靠的, 基于字节流的传输层通…

在Linux(ubuntu22.04)搭建rust开发环境

1.安装rust 1.安装curl: sudo apt install curl 2.安装rust最新版 curl --proto ‘https’ --tlsv1.2 https://sh.rustup.rs -sSf | sh 安装完成后出现&#xff1a;Rust is installed now. Great! 重启当前shell即可 3.检验是否安装成功 rustc --version 结果出现&…

UnityShaderLab 实现程序化形状(一)

1.实现一个长宽可变的矩形&#xff1a; 代码&#xff1a; fixed4 frag (v2f i) : SV_Target{return saturate(length(saturate(abs(i.uv - 0.5)-0.13)))/0.03;} 2.实现一个半径可变的圆形&#xff1a; 代码&#xff1a; fixed4 frag (v2f i) : SV_Target{return (distance(a…

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题 背景一、为什么会堆内存溢出&#xff1f;二、解决堆内存溢出措施三、堆内存参数应该怎么调整&#xff1f;四、堆内存大小配置建议 背景 Windows环境下使用JMeter压测运行一段时间后&#xff0c;JMeter日志窗口报错“java.lang.OutOfMe…