首页 > 其他分享 >浏览器缓存机制的理解

浏览器缓存机制的理解

时间:2022-10-27 20:33:37浏览次数:59  
标签:缓存 浏览器 Cache 理解 Push HTTP 资源


缓存可以减缓网络OI消耗,提高访问速度。

通过网络获取内容速度慢而且开销巨大。大的响应需要在客户端和服务器之间进行多次来回的通信,就导致延迟了浏览器获取和处理内容的时间,还会增加了访问者的流量费用。所以缓存并且重复利用之前获取的资源的能力,成为了性能优化的重要关键。

浏览器缓存机制有四个方面,按照获取资源时请求的优先级排序如下:

1、Memory Cach :内存中的缓存,是浏览器最先去命中一种缓存。它的响应速度是最快的。但是时间也是最短的,在进程结束后,就是tab关闭后,内存的数据也会消失。

因为内存资源是有限,那么哪些资源可以被放入内存呢?浏览器遵循的是“节约原则”,Base64格式的图片几乎永远可以被存放在memory Cache中,还有一些体积不大的JS、CSS文件也会被写入内存中。

2、Service Worker Cache :ServiceWorker是一种立于主线程之外的JavaScript线程,脱离浏览器窗体,所以无法直接访问DOM。无法干扰页面的性能,但是可以为我们实现离线缓存、消息推送和网络代理等功能。ServiceWorker的生命周期包含了install、active、working三个阶段。当ServiceWorker被install,那它将始终存在,只会在active和working之间切换,除非是我们主动终止(Server Worker 对协议是有要求的,必须以 https 协议为前提。)

3、HTTP Cache :HTTP缓存是日常开发中常用的一种缓存机制,分为强缓存和协商缓存。会优先考虑强缓存,在命中强缓存失败时才会走协商缓存。

强缓存的特征

强缓存使用了HTTP头中的Expires和Cache-Control两个字段来控制。在请求第二次发出时,浏览器会根据其中的expires和Cache-Control来判断目标资源是否命中强缓存,若是,命中了则直接从缓存中获取资源,不会再次与服务器发生通信。命中强缓存时,返回的HTTP状态码为200.

Status Code:200  (from disk  cache)

协商缓存:浏览器与服务器合作时的缓存策略。协商缓存依赖于服务器端与浏览器之间的通信。在协商缓存机制下,浏览器需要向服务器咨询缓存的相关信息,从而进行判断是否重新发起请求、下载完整的响应,还是从本地获取缓存资源。

若服务器提示缓存资源没有被改动,那么资源就会被重定向到浏览器缓存,这是网络请求的状态码为

Status Code:304 NotModified

HTTP缓存决策:如下图

当我们的资源不可复用时,直接设置Cache-Control为no-store,拒绝一切形式的缓存;不然会考虑是否每次都需要向服务器进行缓存有效确认,若需要,则Cache-Control设置为no-cache;否则考虑该资源是否可以被代理服务器缓存,根据其结果来决定是设置为private还是public;然后考虑该资源的过期时间,设置对应的max-age还是s-maxage。最后配置协商缓存需要用到Etag等参数。

4、Push Cache :Push Cache 是指 HTTP2 在 server push 阶段存在的缓存。Push Cache 是缓存的最后一道防线。浏览器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情况下才会去询问 Push Cache。

Push Cache 是一种存在于会话阶段的缓存,当 session 终止时,缓存也随之释放。

不同的页面只要共享了同一个 HTTP2 连接,那么它们就可以共享同一个 Push Cache


标签:缓存,浏览器,Cache,理解,Push,HTTP,资源
From: https://blog.51cto.com/u_12344418/5801934

相关文章

  • 力扣(leetcode) 100. 相同的树 (理解起来简直不要太容易)
    题目在这:​​https://leetcode-cn.com/problems/same-tree/​​题目分析:题目还是比较容易理解的,给了两个树。看是不是相同的,这里的相同要求树的结构相同,且每个节点里的数值......
  • EhCache分布式缓存
    1.什么是EhCacheEhCache是一个比较成熟的Java缓存框架,最早从hibernate发展而来,是进程中的缓存系统,它提供了用内存,磁盘文件存储,以及分布式存储方式等多种灵活的cache管......
  • 使用浏览器保存账号密码并不安全,你的密码可能被坏人记下
    很多人为了图个方便,喜欢使用浏览器保存账号和密码。绝大多数人认为,浏览器中的密码是加密存储的,没有什么安全隐患!然而,通过这篇文章告诉你,使用浏览器保存账号和密码并不安全!......
  • Edge和Firefox的缓存位置修改
    更新Edge老办法:mklink/D"C:\Users\yourname\AppData\Local\Microsoft\Edge\UserData\Default\Cache"目标目录Edge:(此办法经过实验已经置为:不推荐等级 原因是使用策......
  • 教你2种常用的电商高并发处理解决方案
    网站架构师面临的最大挑战之一就是并发。自Web服务开始以来,并发水平一直在不断增长,一个主流网站同时服务十万甚至数百万用户,这并不罕见。就目前应用广泛的电商系统来说,各种......
  • Redis 缓存数据库一致性手撕面答
    引言自Redis入门篇过后,已经好久没更Redis了,接下来应该从实战篇,原理篇,面试篇几个层次来展开,本篇主要是实战篇中的数据库缓存一致性问题,以问题形式展开,应对面试场景作答【melo......
  • 浏览器播放语音
    调用浏览器原生的apifunctiontest(test){console.log('test',test)//varurl="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text='"+enco......
  • 一级缓存和二级缓存原理与使用
    前言Mybatis会将相同查询条件的SQL语句的查询结果存储在内存或者某种缓存介质中,当下次遇到相同的SQL时不执行该SQL,而是直接从缓存中获取结果,减少服务器的压力,尤其是在查询......
  • nginx+lua+redis实现广告缓存
    需求分析#需要在页面上显示广告的信息。OpenResty#OpenResty介绍#OpenResty(又称:ngx_openresty)是一个基于NGINX的可伸缩的Web平台,由中国人章亦春发起,提供了很多......
  • 关于PO、BO、VO、DTO、DAO、POJO等概念的理解
    PO(PersistantObject)持久对象PO是持久化对象,用于表示数据库中的一条记录映射成的Java对象,类中应该都是基本数据类型和String,而不是更复杂的类型,因为要和数据库表字段对应......