前端性能优化:浏览器的2种缓存方式要弄清

news2024/11/15 11:14:30

在前端性能优化中,最重要的就是缓存,使用缓存可以极大的提升浏览器的响应速率。

什么是缓存呢?

当我们第一次访问某个网站时,浏览器会把网站中的图片等资源存储在电脑中,以备后续使用,第二次访问该网站时,浏览器直接访问缓存中的数据,从而达到提高浏览器的响应效率,优化用户的体验。

缓存的优点

1.提高浏览器的响应速率;

2.减少服务器的访问压力;

3.减少对网络的压力。

除了浏览器缓存之外,还存在CDN缓存、代理服务器缓存等等;这里主要描述浏览器缓存,浏览器缓存也指的是HTTP缓存,当我们使用浏览器用http协议与服务器交互时,浏览器会使用一种与服务器约定的规则进行缓存操作。

缓存的类型

浏览器的缓存位置一般分为强缓存和协商缓存。

他们之前的区别是强缓存不需要向浏览器发送请求,直接从缓存中读取资源,协商缓存需要询问浏览器缓存是否过期以确定从哪里读取资源。

Part.

强缓存通过设置http header来实现:Expires 和 Cache-Control。

Expires用来指定资源到期的具体时间,是服务器的具体时间点。该属性是HTTP/1中使用的属性,受限于本地时间,如果本地时间修改,可能会造成缓存失效。

Cache-Control也用来指定资源的到期时间,他的时间是一个时间范围。比如:Cache-Control:max-age=300,单位是秒,代表该资源的有效时间是5分钟。该属性是HTTP1.1中的属性,如果Expires和Cache-Control都设置,则Cache-Control的优先级高于Expires。

Part.

协商缓存是在强缓存失效之后,浏览器携带缓存标识向服务器发起请求,由服务器决定是否使用缓存。协商缓存可以通过两种HTTP Header来实现:Last-Modified和ETag。

Last-Modified

浏览器第一次访问资源时,服务器会在response头中添加时间节点,这个事件点是服务器最后一次修改文件的时间点,浏览器第二次访问该资源时,检测到缓存文件中有last-Modified,就会在第二次请求头中添加if-Modified-Since,值为上次Last-Modified的值,服务器拿到该值后,会与该资源在服务器端的最后修改时间做对比,如果相同,则说明命中缓存,返回304,如果不相同,则会返回200,并返回新资源。

ETag

和Last-Modified相同,Last-Modified会返回最后修改的时间点,而Etag会返回一个新的token,第二次请求时,token会在If-None-Match中返回给服务器,服务器会比较token是否一致。

总结

浏览器缓存的强缓存和协商缓存如下图:

在这里插入图片描述

行动吧,在路上总比一直观望的要好,未来的你肯定会感 谢现在拼搏的自己!如果想学习提升找不到资料,没人答疑解惑时,请及时加入扣群:,里面有各种软件测试+开发资料和技术可以一起交流学习哦。

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

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

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

相关文章

构建智能运维系统:创新架构与效率优化

随着信息技术的迅猛发展,企业对于运维效率和服务质量的要求越来越高。智能运维系统的设计和实施,不仅能够提升系统可靠性和响应速度,还能有效降低成本和人力投入。本文将深入探讨智能运维系统的架构设计原则和关键技术,为企业在运…

观成科技:活跃窃密木马TriStealer加密通信分析

1.概述 观成安全研究团队近期在现网监测到多起TriStealer窃密木马攻击事件,TriStealer窃密木马从2024年4月开始活跃,通过Bunny CDN进行载荷下发。TriStealer会收集系统信息、屏幕截图、浏览器中存储的账号密码以及设备中所有的“txt”后缀文件、桌面文件…

华清数据结构day7 24-7-24

1> 二叉树的创建、遍历自己实现一遍 bitree.h #ifndef BITREE_H #define BITREE_H #include<myhead.h> typedef char datatype;typedef struct Node {datatype data;struct Node *L;struct Node *R; }Node,*Bitree; //创建 Bitree tree_create(); //先序遍历 void p…

el-table合计行更新问题

说明&#xff1a;在使用el-table自带的底部合计功能时&#xff0c;初始界面不会显示合计内容 解决方案&#xff1a;使用 doLayout()方法 updated() {this.$nextTick(() > {this.$refs[inventorySumTable].doLayout();});},完整代码&#xff1a; // show-summary&#xff1a…

【PyTorch】图像多分类项目部署

【PyTorch】图像多分类项目 【PyTorch】图像多分类项目部署 如果需要在独立于训练脚本的新脚本中部署模型&#xff0c;这种情况模型和权重在内存中不存在&#xff0c;因此需要构造一个模型类的对象&#xff0c;然后将存储的权重加载到模型中。 加载模型参数&#xff0c;验证模型…

人工智能与机器学习原理精解【6】

文章目录 数值优化基础理论凹凸性定义在国外与国内存在不同国内定义国外定义总结示例与说明注意事项 国内凹凸性二阶定义的例子凹函数例子凸函数例子 凸函数&#xff08;convex function&#xff09;的开口方向凸函数的二阶导数凸函数的二阶定义单变量函数的二阶定义多变量函数…

设计模式第三天|设计模式结构型:适配器模式、装饰器模式、代理模式

文章目录 设计模式的分类适配器模式概念俗话说角色具体应用(Spring MVC)图解具体步骤 装饰器模式定义核心俗话说类名表现图解具体构造代码实现简化优点缺点 代理模式(Spring AOP 面向切面)定义俗话说角色代理模式分类静态代理角色代码好处缺点实用 动态代理 AOP什么是AOP具体信…

BFF:优化前后端协作设计模式

BFF&#xff1a;优化前后端协作设计模式 BFF是什么 BFF即 Backends For Frontends (服务于前端的后端)。是一种介于前端和后端之间一种重要的通信设计模式。它旨在解决前端与后端协作中的复杂性问题。 背景 行业背景&#xff1a;传统前端应用&#xff08;如Web应用、移动应…

《深入探秘Java中的枚举:掌握Enum的魔力》

目录 &#x1f4dd; 枚举枚举的定义枚举的使用1、表示一组固定常量2、实现接口3、枚举与策略模式4、EnumSet5、EnumMap &#x1f4ce; 参考文章 &#x1f600; 准备好了吗&#xff1f;让我们一起步入这座Java神奇的城堡&#xff0c;探寻枚举&#xff08;Enum&#xff09;这个强…

Ubuntu 修改源地址

注意事项&#xff1a;版本说明&#xff01;&#xff01;&#xff01; Ubuntu24.04的源地址配置文件发生改变。 不再使用以前的 sources.list 文件&#xff0c;该文件内容变成了一行注释&#xff1a; # Ubuntu sources have moved to /etc/apt/sources.list.d/ubuntu.sources…

STM32-FreeRTOS快速学习

定义 FreeRTOS 满足实施系统对任务响应时间的要求。 实时操作系统、轻量级&#xff08;内核小&#xff0c;只需要几KB的ROM和RAM&#xff09;、 提供了一些内核功能&#xff0c;如任务管理、时间管理、内存管理和通信机制等。 和裸机的区别 裸机&#xff1a;无操作系统&…

产品系统的UI暗色系和浅色系模式切换是符合人体视觉工程学的设计

视觉革命&#xff1a;UI设计中的暗夜与黎明 UI设计如同夜空中最亮的星辰&#xff0c;引领着用户穿梭于信息的海洋。而今&#xff0c;一场视觉革命正在悄然上演&#xff0c;它关乎于我们的眼睛&#xff0c;关乎于我们的体验——那就是产品系统的UI暗色系和浅色系模式的切换。如…

【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作

引言 Jupyter Notebook 是一个交互式计算环境&#xff0c;它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…

Excel超级处理器,工作簿文件.xls/.xlsx/.csv相互批量转换

如何将.xlsx文件转成.csv文件&#xff0c;.xls转换成.xlsx文件&#xff0c;以及.xls文件转成.csv文件或.csv转换成.xlsx文件&#xff0c;如果是单个文件转换&#xff0c;那么将当前文件另存为&#xff0c;保存类型&#xff0c;选择即可。如下图所示&#xff1a; 如果是多个文件…

【AutoDL】AutoDL+Xftp+Xshell+VSCode配合使用教程

身边没有显卡资源或不足以训练模型时&#xff0c;可以租赁服务器的显卡。 1、AutoDL Step :注册账号->选择显卡->选择环境->开机启动 1.1 首先打开AutoDL官网&#xff0c;注册账号 1.2 租赁自己想要的显卡资源 1.3 选择基础环境。 此处&#xff0c;我们让其自动配置…

[网络通信原理]——TCP/IP模型—网络层

网络层 网络层概述 网络层位于OSI模型的第三层&#xff0c;它定义网络设备的逻辑地址&#xff0c;也就是我们说的IP地址&#xff0c;能够在不同的网段之间选择最佳数据转发路径。在网络层中有许多协议&#xff0c;其中主要的协议是IP协议。 IP数据包格式 IP数据报是可变长度…

Linux服务器配置Python+PyTorch+CUDA深度学习环境

参考博主Linux服务器配置PythonPyTorchCUDA深度学习环境_linux cuda环境配置-CSDN博客 https://blog.csdn.net/NSJim/article/details/115386936?ops_request_misc&request_id&biz_id102&utm_termlinux%E8%99%9A%E6%8B%9F%E7%8E%AF%E5%A2%83%E6%8C%89pytorch%20c…

微信答题小程序产品研发-需求分析与原型设计

欲知应候何时节&#xff0c;六月初迎大暑风。 我前面说过&#xff0c;我决意仿一款答题小程序&#xff0c;所以我做了大量的调研。 题库软件产品开发不仅仅是写代码这一环&#xff0c;它包含从需求调研、分析与构思、设计到开发、测试再到部署上线一系列复杂过程。 需求分析…

子数组和为k子数组和最大

题目1&#xff1a;子数组和为k /*给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。子数组是数组中元素的连续非空序列。示例 1&#xff1a;输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2 示例 2&#xff1a;输入&a…

微软蓝屏事件对企业数字化转型有什么影响?

引言&#xff1a;从北京时间2024年7月19日&#xff08;周五&#xff09;下午2点多开始&#xff0c;全球大量Windows用户出现电脑崩溃、蓝屏死机、无法重启等情况。事发后&#xff0c;网络安全公司CrowdStrike称&#xff0c;收到大量关于Windows电脑出现蓝屏报告&#xff0c;公司…