频道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…

CTF之密码学(rot密码)

ROT加密算法,也被称为Caesar加密,是一种简单的字母替换加密算法。以下是对ROT加密算法的详细介绍: 一、基本原理 ROT加密算法通过将字母表中的每个字母向后(或向前)移动固定的位置来加密文本。选择一个固定的偏移量&…

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…

pytorch中的tqdm库

tqdm 是一个 Python 的进度条库&#xff0c;名字来源于阿拉伯语 "taqaddum"&#xff08;意思是“进步”&#xff09;。它以简单易用、高效著称&#xff0c;常用于循环操作中显示进度信息。 基本用法 1. 普通循环 tqdm 可以轻松为 for 循环添加进度条&#xff1a; …

MongoDB数据建模小案例

MongoDB数据建模小案例 朋友圈评论内容管理 需求 社交类的APP需求,一般都会引入“朋友圈”功能,这个产品特性有一个非常重要的功能就是评论体系。 先整理下需求: 这个APP希望点赞和评论信息都要包含头像信息: 点赞列表,点赞用户的昵称,头像;评论列表,评论用户的昵称…

针对嵌入式图形界面的图片压缩,几种比较平衡的算法选择:

RLE (Run Length Encoding) 变种 RLE-4: 4位游程编码&#xff0c;适合图标等色彩数较少的图像SRLE (Sparse RLE): 稀疏型RLE&#xff0c;对于UI中大面积相同颜色区域效果很好优点&#xff1a;解码速度快&#xff0c;实现简单缺点&#xff1a;对于复杂图案压缩率较低特别适合&am…

C++研发笔记16——C语言程序设计初阶学习笔记14

本篇笔记我们继续来学习第三部分《分支语句和循环语句》&#xff0c;在上一篇中我们详细学习了循环语句——for语句以及循环语句——do-while循环&#xff0c;接下来本部分的内容还包括&#xff1a;折半查找算法、猜数字游戏、goto语句。本篇笔记便可以结束第三部分的知识学习部…

三一集团Java开发面试题及参考答案

Java 中有几种常见的线程池? 在 Java 中,常见的线程池有以下几种: 首先是 FixedThreadPool(固定线程数线程池)。它的特点是创建一个固定大小的线程池,线程数量在初始化的时候就已经确定。例如,通过 Executors.newFixedThreadPool (int nThreads) 来创建,其中 nThreads …

CSS元素宽高特点、类型转化、显式和隐藏(display)

元素的宽高特点 块级元素 可以设置宽高&#xff0c;不可以和其他元素在一行设置宽高时&#xff0c;元素的宽高为设置的值没有设置宽高时&#xff0c;宽度和父级宽高一样&#xff0c;高度由元素内容决定 行级元素 不可以设置宽高&#xff0c;可以和其他元素在一行元素的宽高…

k8s的Pod亲和性

针对对象为Pod&#xff0c;目的是实现&#xff0c;新建Pod和目标Pod调度到一起&#xff0c;在同一个Node上。 示例&#xff1a; rootk8s-master:/home/vagrant# cat pod.yaml apiVersion: v1 kind: Pod metadata:name: testpod01labels:app: myapp01env: test1 spec:conta…

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

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