专栏首页前端小菜鸟Web浏览器缓存机制
原创

Web浏览器缓存机制

Web浏览器缓存机制

Web缓存是存在服务器和客户端之前的资源副本。客户端会缓存请求过的静态资源(图片,CSS 文件,JS文件等),当用户再次请求相同的url时,浏览器会根据缓存规则判断是否使用已经缓 存的静态资源文件,或者绕过资源缓存直接请求服务器重新获取资源。

Web缓存也就是HTTP缓存机制,是前端性能优化的重要措施,利用Web缓存可以:

  • 减少数据冗余传输
  • 减轻服务器请求压力
  • 减少资源请求因为网络传输导致的时延,加快渲染速度
  • 较少的数据传输可以减轻网络线路的传输瓶颈。

HTTP缓存首部

Web缓存机制主要是利用HTTP协议定义的首部信息控制缓存。常见的与缓存相关的首部有:

版本

首部

实例

描述

HTTP1.0

Pragma

Pragma

设置页面是否缓存,Pragma为缓存,no-cache表示忽略缓存

Expires

Mon, 22 Jul 2002 11:12:01 GMT

Expires的值是格林尼治时间格式的参数,用来设置过期时间,即定义资源的失效时间,失效时间内则请求使用缓存资源

HTTP1.1

Cache-Control

Cache-Control:max-age=600

Cache-Control首部是为了解决服务器和客户端时间不一致问题导致缓存失效的问题,(a)max-age=600:配置的是请求发起时开始计算的相对时间(毫秒),当前参数时间内请求资源使用缓存资源 (b)no-cache:每次发起请求都需要验证缓存资源的新鲜度,新鲜度满足则返回304状态码,使用缓存资源,否则返回200状态码,返回资源主体(c)no-store:不缓存,每次请求需要从服务器重新获取资源(d)public:所有内容只有客户端可以缓存(e)private:只允许客户端缓存

Last-Modified/If-Modified-Since

这两个首部需要配合使用,同时需要Cache-Control标识参与。(a)Last-Modified:服务器在相应资源请求时,标识资源最后的修改时间,(b)If-Modified-Since :资源过期并且存在Last-Modified声明,请求首部 If-Modified-Since获取Last-Mdodied的值发送到服务器和请求资源的修改时间比对,如果服务器资源修改过则返回资源主体和200状态码到浏览器,浏览器更新缓存资源,否则说明资源无修改返回304状态码

Etag/If-None-Match

W/v20.1

配合Cache-Control使用。(a) Etag是请求的服务器资源的唯一标识,资源改动则标识更改,从而验证资源是否更新。(b)当资源过期请求携带首部If-None-Match赋值Etag的标识值,与服务资源标识进行比对,如果发生变化则变化则返回200状态码和资源主体,否则返回304状态码

缓存分类

HTTP缓存可以根据缓存过程分为强制缓存和协商缓存。

(1)强制缓存:向浏览器缓存查询请求结果,根据缓存结果规则是否使用缓存资源

  • 不存在缓存标识和缓存结果,直接请求服务器资源
  • 存在缓存结果和缓存标识,缓存结果失效,使用协商缓存
  • 存在缓存结果和缓存标识,缓存结果未失效,使用缓存

强制缓存的相关的首部:Expires和Cache-Control

(2)协商缓存:当强制缓存失效,缓存规则使用协商缓存,HTTP请求向服务器发起缓存器验证,服务器判断缓存是否生效。

  • 缓存生效,返回304状态码
  • 缓存失效,返回200状态码和新的资源结果,浏览器加载资源并且更新本地缓存

协商缓存相关的首部:Last-Modified / If-Modified-Since和Etag / If-None-Match

缓存优先级:

  • Pragma 和Expires是HTTP1.0定义的用于管理缓存的首部字段,当两个首部字段同时存在,Pragma的优先级高于Expires
  • Cache-Control是HTTP1.1定义的首部字段,是为了解决Expires定义的过期时间相对于服务器而已,无法确保服务器和客户端时间一致性问题。 Cache-Control的优先级高于Expires
  • 强制缓存优先级高于协商缓存
  • Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since

缓存的处理步骤

web缓存处理步骤很简单,包括了接收请求,解析报文,查询缓存,新鲜度检查,创建响应和发送,记录日志是事务操作的可选步骤。

  • 接收:读取请求报文
  • 解析:解析请求报文,获取URL和首部信息
  • 查找:查找本地缓存,没有缓存文件则请求服务器或者父类缓存,并缓存
  • 新鲜度检查:验证缓存是否新鲜,需要再验证则需要请求服务器验证缓存新鲜度
  • 创建响应:缓存主体和更新的首部构建响应报文
  • 发送:响应发送到服务器
  • 日志:记录信息

其他

浏览器缓存分为内存缓存和硬盘缓存,内存缓存读取速度快,时效性好;硬盘缓存读取缓存时需要I/O操作,重新解析缓存内容,相对于内存缓存速度慢但是不会占用内存资源。

浏览器将JS脚本资源和图片资源存储在内存缓存,css,xml文件存储的硬盘文件。

当浏览器刷新时,js,图片等资源直接从内存中加载,css文件需要重用从硬盘读取并解析渲染到页面。

参考

  1. HTTP 缓存
  2. HTTP权威指南
  3. Web缓存相关知识整理
  4. 彻底理解浏览器的缓存机制

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入理解JavaScript的Event-Loop机制

    JavaScript 是单线程的,只有JS引擎线程执行事件队列的事件。为了防止代码阻塞,JavaScript使用了异步执行机制。

    伯爵
  • ES6语法中类(class)的实现原理

    JavaScript语言不同于其他的类C语言,没有提供类的概念,但是可以提供类似的语法糖来实现JS面向对象的编程范式,本质上不是严格意义上的类

    伯爵
  • JavaScript实现sleep方法

    JavaScript是单线程语法,没有语言内置的休眠(sleep or wait)函数,所谓的sleep只是实现一种延迟执行的效果,无论是使用ES5,Promi...

    伯爵
  • [NewLife.XCode]对象字典缓存(百万军中取敌首级)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCo...

    大石头
  • 高并发之缓存

    应用需要支撑大量并发量,但数据库的性能有限,所以使用缓存来减少数据库压力与提高访问性能。

    lyb-geek
  • [CodeIgniter4]-网页缓存

    尽管 CodeIgniter 已经相当高效了,但是网页中的动态内容、主机的内存 CPU 和数据库读取速度等因素直接影响了网页的加载速度。 依靠网页缓存, 你的网...

    landv
  • 高并发场景下缓存处理的一些思路

    在实际的开发当中,我们经常需要进行磁盘数据的读取和搜索,因此经常会有出现从数据库读取数据的场景出现。但是当数据访问量次数增大的时候,过多的磁盘读取可能会最终成为...

    好好学java
  • 大型网站必备,彻底理解Http的缓存机制!

    浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,...

    掌上编程
  • 浏览器缓存机制

    Service Worker是运行在浏览器背后的独立线程,一般可以用于实现缓存。使用service worker,传输协议必须为HTTPS。因为service ...

    用户3258338
  • 如何使用ehcache作为mybatis的二级缓存?

    Ehcache 是现在最流行的纯Java开源缓存框架,配置简单、结构清晰、功能强大,最初知道它,是从Hibernate的缓存开始的。

    java思维导图

扫码关注云+社区

领取腾讯云代金券