前端浏览器缓存的好处和弊端以及如何处理弊端

浏览器缓存

好处:

  1. 减少冗余的数据传输,节省带宽。
  2. 减轻服务器的请求压力,因为有缓存可以减少向服务器发送请求,
  3. 资源从缓存中读取,加快客户端的访问速度。因为无需从服务器请求等待响应

缺点:

  1. 系统更新时,如何删除浏览器的缓存资源,加载最新的页面。

缓存

  1. Service Worker:是一种独立于主线程之外的 Javascript 线程。它脱离于浏览器窗体,可以帮我们实现离线缓存、消息推送和网络代理等功能。

  2. Memory Cache:存在内存中的缓存。包括当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。因为存储在内存中,MemoryCache 是响应速度最快的一种缓存,但由于同样的原因,缓存持续性很短,会随着进程的释放而释放,一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。

  3. Disk Cache:Disk Cache 也就是存储在硬盘中的缓存,读取速度慢点,但是什么都能存储到磁盘中,比之 Memory Cache 胜在容量和存储时效性上。会根据 HTTP Herder 中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。

  4. Push Cache:Push Cache 是 HTTP2 在 server push 阶段存在的缓存,当以上三种缓存都没有命中时,它才会被使用,Push Cache 是一种存在于会话阶段的缓存,当 session 终止时,缓存也随之释放。不同的页面只要共享了同一个 HTTP2 连接,那么它们就可以共享同一个 Push Cache。

强缓存

不会向服务器发送请求,直接从缓存中读取资源。状态码 200,显示 from disk cache 或 from memory cache。设置两种 Http Header 实现:Expires 和 Cache-Control

  • Expires:值是一个时间戳,表示本地时间到这个设置的时间缓存就失效。
    • 缺点:受限于本地时间
    • 推荐使用 Cache-Control
  • Cache-Control:优先级比 Expires 高,可以在请求头或者响应头中设置
    1. private:默认:只能在浏览器中缓存,只有在第一次请求中访问服务器。如有 max-age:缓存期间不访问服务器
    2. public:可以被任何缓存区缓存,如浏览器、服务器、代理服务器
    3. no-cache: 可以缓存,相当于协商缓存,每次都需要去服务器验证缓存是否一致。如有 max-age:缓存期间不访问服务器
    4. no-store:不仅不能缓存,连暂存也不可以
    5. max-age:以秒为单位的缓存时间,设置时间内,均使用本地的缓存,不再向服务器发起请求
    6. s-magage=:跟 max-age 作用一样,只在代理服务器中生效。优先级高于 max-age,只对 public 缓存有效,
    7. must-revalidate:可缓存但必须再想源服务器进行确认
    8. proxy-revalidate:要求中间缓存服务器对缓存的响应有效性进行确认

协商缓存

当 cache-control 和 Expires 过期或者它的属性设置为 no-cache 时,那么浏览器第二次请求时就会与服务器进行协商,判断资源是否更改,

  • 没更改返回 304 Not Modified,使用本地缓存资源。

  • 资源更改,返回 200,重新加载,本次缓存资源更新。

    浏览器与服务器的交互依靠 Last-Modified/If-Modified-Since、ETag/If-None-Match 的 header 头属性,在请求头和响应头成对出现的。

  1. Last-Modified/If-Modified-Since:

浏览器在第一次访问资源,或缓存过期后访问,服务器返回资源的同时,在 response header 中添加 Last-Modified 的 header,值是这个资源在服务器上的最后修改时间,浏览器接收缓存文件和 header 信息。随后我们每次请求时,浏览器会自动带上一个叫 If-Modified-Since 的时间戳字段给服务器,它的值正是上一次 response 返回给它的 Last-modified 值,然后服务器会根据 If-Modified-Since 的值对比资源的最后修改时间判断资源是否进行了修改更新。

  1. ETag/If-None-Match :

Etag 是由服务器为每个资源生成的唯一的标识字符串,这个标识字符串是基于文件内容编码的,只要文件内容不同,它们对应的 Etag 就是不同的,因此 Etag 能够精准地感知文件的变化。Etag 和 Last-Modified 类似,当首次请求时,我们会在响应头里获取到一个最初的标识符字符串。那么下一次请求时,浏览器就会在请求头里就会带上一个值相同的、名为 if-None-Match 的字符串供服务器比对。Etag 的优先级会比 Last-Modified 高,但是 Etag 因为要生成,也会更消耗服务器性能。

Cache-Control: no-cache 和 Cache-Control: no-store 区别

看字面意思容易误解,no-cache 就是不缓存,但是 no-cache 并不是不缓存,而是使用协商缓存,所以并不能禁止缓存,no-store 才是真正的禁止缓存。从节省带宽角度讲,使用 no-cache 更优一点,文件未发生改变时只传输很小的报文大小,只有在文件改变时才会传输整个文件大小。而不是 no-store 不管什么情况都传输整个文件大小。

Pragma: no-cache:和 Cache-Control: no-cache 区别

Pragma: no-cache 跟 Cache-Control: no-cache 相同,Pragma: no-cache 兼容 http 1.0 ,Cache-Control: no-cache 是 http 1.1 提供的。因此,Pragma: no-cache 可以应用到 http 1.0 和 http 1.1,而 Cache-Control: no-cache 只能应用于 http 1.1.

如何保证系统实时更新

方法一:
以 vue 为例,vue 在打包的时候,css 和 js 名字都加了哈希值,所以改动后打包生成的 js 和 css 是唯一的,页面请求的是新资源,不会有缓存问题。但是入口文件 index.html 会因为缓存造成更新问题,如果我们更新了,但是浏览器使用的是缓存,就会出现问题。所以需要对入口文件设置不使用强制缓存,需要每次去服务器验证文件是否修改,即使用协商缓存。

server {listen       80;server_name  域名;root   文件目录;index  index.html;location  {// 不加这一句,会出现nginx欢迎页面,无法正确加载资源try_files $uri /index.html;}location ~ .*\.(html)$ {// 对html文件限制缓存add_header Cache-Control no-store;// 不缓存// 或者用add_header Cache-Control no-cache;替代上面那一句,协商缓存add_header Pragma no-cache}
}

方法二:

  1. 最直接的办法
    Internet 选项 -> Internet 临时文件“设置” -> “每次访问此页时检查”,缺点是要设置每台客户端,客户端较多时不可取

  2. 设置网页头(header)

状态码

  1. 200 from memory cache
    • 状态码是灰色的,从内存中读取缓存的资源,强缓存。不请求服务器。
    • 页面关闭会被内存释放,再次打开相同页面需要重新请求服务器,然后重新缓存在浏览器
    • 脚本、字体、图片会被存放在内存中
  2. 200 from disk cache
    • 状态码是灰色的,从磁盘中读取缓存的资源,强缓存,不请求服务器。
    • 页面关闭不会被释放,这部分资源存在电脑磁盘中,只有用户手动清除浏览器缓存才会被释放。
    • 较大的 css 文件、js 文件和 jpg 图片会存入硬盘
  3. 200
    • 服务器请求响应的数据
  4. 304
    • 协商缓存。请求访问服务器,发现资源没有更新,使用本地资源。

磁盘和内存的区别

  1. 内存是计算机的工作场所,磁盘是用来存放暂时不用的信息
  2. 信息保存不同,内存中的信息会随刷新丢失,磁盘中的信息可以长久保存(除非手动删除)
  3. 磁盘的容量远大于内存
  4. cpu 只能读取内存里的数据,磁盘是作为存储空间的。

浏览器三级缓存原理

  1. 先查找内存,如果内存中存在,从内存中加载
  2. 如果内存中未找到,选择硬盘获取,如果硬盘中有,从硬盘中加载
  3. 如果硬盘中未找到,那就请求服务器,重新加载资源,加载到的资源缓存到硬盘和内存。

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

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

相关文章

使用docker-file 将springboot项目打成镜像,发布成容器服务

一 docker-file将jar包发布成容器服务 1.1 docker的安装 [rootlocalhost ~]# uname -r 3.10.0-862.el7.x86_64 [rootlocalhost ~]# yum install docker [rootlocalhost export]# systemctl start docker [rootlocalhost export]# docker -v Docker version 1.13.1, build…

CANoe测试车载以太网 Link up/Link down时间

系列文章目录 文章目录 系列文章目录前言一、CANoe配置Link up/Link down1、配置端口2、打开端口二、CANoe测试Link up /Link down时间1、打开Trace监听窗口2、CANoe查看Link up时间3、CANoe查看Link down时间前言 随着智能电动汽车的行业的发展,车载以太网的应用越来越广泛,…

学习react,复制一个civitai(C站)-更新3

更新内容 优化了一下加载速度 图片列表 初步更新了199张图片,大部分都有stable diffusion 的prompts。 可以直接复制到AI绘画里面使用。 先来看看效果图吧: 我还是挺喜欢这种砌砖流布局 技术点 同样使用了砌墙瀑布流布局:masonry js 安装方法 npm …

修复Google翻译小工具

修复Google翻译小工具 前言自己改的,小点声用 sudo vim /etc/hosts加上以下内容即可 nslookup google.cn |grep Address: |head -n 2|tail -n 1 |awk {print $2} translate.google.com

Golang 面向对象编程 概念

在Golang里面没有类的概念,它是使用结构体的东西来替代这个类的概念。 //张老太养了2只猫猫:一只名字叫小白,今年3岁,白色。还有一只叫小花,今年8岁,花色。 请编写一个程序,当用户输入小猫的名…

Redis第一天

Redis第一天 Redis基本数据结构数据结构字符串Redis链表字典跳跃表压缩列表 对象字符串对象列表对象哈希对象集合对象有序集合对象类型检查键回收 Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSI C语言编写、支持网络…

ios 启动页storyboard 使用记录

本文简单记录ios启动页storyboard 如何使用和注意事项。 xcode窗口简介 以xcode14为例,新建项目如下图,左边文件栏中的LaunchScreen.storyboard 为默认启动页布局。窗口中间部分是storyboard中的组件列表,右侧为预览,可以看到渲…

摩尔投票算法(Moore‘s Voting Algorithm)及例题

摩尔投票算法(Moores Voting Algorithm)及例题 摩尔投票算法简介摩尔投票算法算法思想摩尔投票算法经典题目169. 多数元素229. 多数元素 II6927. 合法分割的最小下标 上午打力扣第 354 场周赛最后十五分钟用摩尔投票算法直接秒了第三题。 摩尔投票算法简…

matlab数组中元素位置

%判断某个元素的位置 find(a2)就得到2所在的位置Matlab判断某数组中是否包含某元素及其位置

torch.nn.BCEWithLogitsLoss与torch.nn.BCELoss

torch.nn.BCEWithLogitsLoss相当于sigmoidtorch.nn.BCELoss。代码示例如下, import torch import torch.nn as nnBCEWithLogitsLoss nn.BCEWithLogitsLoss() BCELoss nn.BCELoss()x torch.randn((1,)) y torch.FloatTensor([1])Loss_BCEWithLogits BCEWithLog…

【图像处理】基于双目视觉的物体体积测量算法研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【QT/OpenCV】QT实现张正友相机标定

相机标定 01、相机标定02、OpenCV函数及其张正友标定法2.1、相机标定步骤2.2、相机标定相关函数2.2.1 提取角点--- findChessboardCorners2.2.2 亚像素角点提取1--- find4QuadCornerSubpix2.2.3 亚像素角点提取2--- cornerSubPix2.2.4 绘制内角点 --- drawChessboardCorners2.2…

Go 记录日志——log包

Golangs log模块主要提供了3类接口。分别是 “Print 、Panic 、Fatal ”,对每一类接口其提供了3中调用方式,分别是 "Xxxx 、 Xxxxln 、Xxxxf",基本和fmt中的相关函数类似,下面是一个Print的示例: package m…

HDFS的数据存储

文章首发地址 HDFS的数据存储 HDFS的数据存储包括两块: 一块是HDFS内存存储另一块是HDFS异构存储 HDFS内存存储是一种十分特殊的存储方式,将会对集群数据的读写带来不小的性能提升,而HDFS异构存储则能帮助我们更加合理地把数据存到应该存的…

生成式AI:大语言模型ChatGPT交互的机制

推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 与 ChatGPT 有效交互的快速工程 随着生成式人工智能的普及,特别是 ChatGPT,提示已成为人工智能世界中越来越重要的技能。制作提示,与大型语言模型&…

【C语言督学营 第十八天】考研408排序大题初探(将排序思想融入题目)

文章目录 题目一分析代码实战 题目二分析代码实战 补充(快排与归并)数据结构大题注意点!!!(评分标准) 题目一 分析 (1)算法的基本设计思想 由题意知,将最小的nl2个元素放在Ai中,其余的元素放在A2中&#x…

Linux信号

文章目录 一.信号基础二.信号的产生1.使用键盘组合键发送信号(只能给当前正在运行的进程发)信号捕捉2.使用kill指令(可以向任意进程发送信号)3.使用raise()让进程自己给自己发送信号4.硬件异常产生信号a.除…

Java中List的使用方法简单介绍

Java中List的使用方法简单介绍 java中的List就是一种集合对象,将所有的对象集中到一起存储。List里面可以放任意的java对象,也可以直接放值。 使用方法很简单,类似于数组。 使用List之前必须在程序头引入java.util.* import java.util.*; pub…

分享四款导航页 个人主页html源码

一、开源免费,可以展示很多社交账号,也可以更换社交账号图标指向你的网站,上传后即可使用 https://wwwf.lanzout.com/ik7R912s031g 二、开源免费,不过部署稍微麻烦点 https://wwwf.lanzout.com/iCq2u12s02wb 三、适合做成导航页面…

HTTP常见的状态码

HTTP(Hypertext Transfer Protocol)是一种用于传输超文本的应用层协议。在HTTP协议中,每个响应都包含一个状态码(Status Code),用于指示请求的处理结果。以下是HTTP常见的状态码及其含义: 1xx -…