29、浏览器缓存的原理

一、浏览器缓存和http协议标头

1、缓存优点：

提高网页请求响应的速度
降低服务器带宽的占用
降低服务器的负载（主要指的是cpu 内存这些硬件资源）占用
提高用户的体验度
降低用户的焦虑

2、浏览器缓存是在用户的disk（磁盘）或者内存上面

3、浏览器的缓存原理

（1）当网页需要资源的时候，首先访问浏览器缓存，如果浏览器缓存没有数据时，那么就会请求服务器端，服务器进行响应数据，浏览器就会同时把数据资源存储起来，当网页再次需要这个资源的时候，还是先访问浏览器缓存，发现有数据就会直接返回。

（2）原理图：

4、浏览器缓存的五个概念

（1）浏览器：资源的请求方

（2）源服务器：就是后端服务器，真正资源的来源端，可以将内容缓存到任何的位置。

（3）新鲜度：就是缓存数据的时间周期。

（4）检验值：缓存过期之后，会继续请求服务端返回数据，将会对旧的缓存和新的数据内容做对比，如果数据没有变动，那么只需要更新缓存的过期时间，不需要更新缓存内容。

（5）缓存失效：就是缓存过期并且缓存的内容和新的内容存在不同时，就会将新的内容存储到缓存中。

二、http协议标头

浏览器和服务器之间主要的通讯方式是http协议，所有的缓存策略都是在http标头中，每当浏览器请求服务端时，服务都会在响应报文中设置一段标头。

1、新鲜度相关的标头：cache-control、pragma、expires。

cache-control： private、public、no-store、no-cache、max-age、s-max-age、must-revalidate、proxy-revalidate

（1）private：内容是对用户私有的，只能在浏览器中缓存，而不能在服务器中缓存

（2）public：表示可以在任何位置缓存

（3）no-store：表示不可以被任何人缓存

（4）no-cache：可以被缓存，但是需要内容进行校验

（5）max-age：表示缓存的过期时间，单位为秒。

（6）s-max-age：共享缓存的过期时间（代理服务器会使用这个时间）

（7）must-revalidate：如果内容缓存有效期超过了cache-control的max-age时间，必须让请求服务器

（8）proxy-revalidate：跟must-revalidate相同，不过用于代理服务器。
pragma:设置no-cache数据就不会被缓存
expires：设置缓存期限

2、检验值相关的标头：etag（entity tag 实体标签）、last-modified、if-none-match、if-modify、if-modified-since

ETag：资源的唯一标识符，缓存有效期过期后，再次请求服务器会附带请求头if-none-match，它的值就是上一次请求返回的ETag，然后服务器收到当前的请求后，会将它的值跟新的内容进行对比，如果不相同，返回新的ETag和新的资源数据，否则返回304状态码，表示没有发生任何变化。
last-modified：表示资源上一次修改的时间

三、强缓存和协商缓存

在http中可以通过控制http响应头来控制http客户端的资源缓存，可分为两大类：强缓存和协商缓存

1、强缓存

强缓存是通过响应头的cache-control中的max-age等指令进行控制，max-age可设置强缓存的时间周期，在此周期内发送请求将直接从客户端缓存获取资源，而不会向服务器发送请求。

2、协商缓存

协商缓存可以通过响应头的ETag和last-modified进行控制，每次发送请求时，需要进行缓存新鲜度检验，如果资源过旧，那么直接从响应中获取新的资源返回状态码200 OK，否则从客户端缓存获取返回状态码304 Not Modified。新鲜度检验通过请求头if-none-match（上一次请求的ETag）与响应头的ETag进行对比，或者请求头if-modified-since与响应头last-modified进行对比。

(1) if-none-match与ETag对比：每次发送请求就会携带上一次请求返回来的标识if-none-match发送到服务器，服务器进行校验标识，如果if-none-match跟服务器的ETag不相符合，那么就返回200状态码、最新的资源和新的资源标识。否则返回304状态码，从缓存中直接获取。

(2) if-modified-since与last-modified对比：每次发送请求的时候都会携带上一次内容更新的时间发送到服务器，服务器就会判断请求的资源有没有最新的修改，有就返回200状态码 OK并返回最新的更新时间和新的资源与标识，否则返回304状态码 Not Modified 直接从缓存拿数据。

（3） ETag和Last-Modified的区别

优先使用ETag

1、last-modified 的值只能精确到秒

2、文件如果每隔一段时间都会重复生成，但是内容相同。服务器就会检测到新的时间更新，last-modified都会每次返回200和新的资源文件与资源标识，即便内容相同。但ETag能判断出文件的内容相同，就会返回304，使用缓存。

29、浏览器缓存的原理相关推荐

浏览器缓存问题原理以及解决方案
浏览器缓存问题: 简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中.缓存会根据进来的请求保存输出内容的副本.当下一个请求来到的时候, ...
十分钟彻底弄懂浏览器缓存机制原理
前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能. 但是对于很多前端 ...
Cache-Control浏览器缓存
描述同一个标签页,打开 A 站点,访问 config 接口,正常:打开 B 站点,访问 config 接口,正常:通过浏览器后退返回 A 站点,访问 config 接口,数据异常,config 返回 ...
版本更新带来的缓存问题_浏览器缓存原理总结
作者: Poetry 来源:http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存 1.浏览器在加载资源时, ...
里面怎么缓存图片_浏览器缓存原理总结
一.浏览器缓存基本认识分为强缓存和协商缓存 1.浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务 ...
前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理？送你满分答案...
(本文适合所1-3年的前端阅读) 原文链接: http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存浏览器 ...
vuex、浏览器缓存机制、数据响应式的原理
vuex是vue框架中状态管理, 它有5种属性,即state.getter.mutation.action.module state:存放公共数据 getter:获取根据业务场景处理返回的数据 mut ...
浏览器缓存原理以及本地存储
作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用 ...
浏览器缓存及实现原理
缓存的种类浏览器缓存缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应.尤其是在多页应用的网站中,如果你在多个页面使用了一张相同的图片,那么缓存这张图片就变得特别的 ...

29、浏览器缓存的原理

一、浏览器缓存和http协议标头

1、缓存优点：

提高网页请求响应的速度

降低服务器的负载（主要指的是cpu 内存这些硬件资源）占用

降低用户的焦虑

2、浏览器缓存是在用户的disk（磁盘）或者内存上面

3、浏览器的缓存原理

（2）原理图：

4、浏览器缓存的五个概念

（1）浏览器：资源的请求方

（2）源服务器：就是后端服务器，真正资源的来源端，可以将内容缓存到任何的位置。

（3）新鲜度：就是缓存数据的时间周期。

（4）检验值：缓存过期之后，会继续请求服务端返回数据，将会对旧的缓存和新的数据内容做对比，如果数据没有变动，那么只需要更新缓存的过期时间，不需要更新缓存内容。

（5）缓存失效：就是缓存过期并且缓存的内容和新的内容存在不同时，就会将新的内容存储到缓存中。

二、http协议标头

浏览器和服务器之间主要的通讯方式是http协议，所有的缓存策略都是在http标头中，每当浏览器请求服务端时，服务都会在响应报文中设置一段标头。

1、新鲜度相关的标头：cache-control、pragma、expires。

cache-control： private、public、no-store、no-cache、max-age、s-max-age、must-revalidate、proxy-revalidate

（2）public：表示可以在任何位置缓存

（4）no-cache：可以被缓存，但是需要内容进行校验

（6）s-max-age：共享缓存的过期时间（代理服务器会使用这个时间）

（8）proxy-revalidate：跟must-revalidate相同，不过用于代理服务器。

expires：设置缓存期限

2、检验值相关的标头：etag（entity tag 实体标签）、last-modified、if-none-match、if-modify、if-modified-since

三、强缓存和协商缓存

在http中可以通过控制http响应头来控制http客户端的资源缓存，可分为两大类：强缓存和协商缓存

1、强缓存

强缓存是通过响应头的cache-control中的max-age等指令进行控制，max-age可设置强缓存的时间周期，在此周期内发送请求将直接从客户端缓存获取资源，而不会向服务器发送请求。

2、协商缓存

（3） ETag和Last-Modified的区别

优先使用ETag

1、last-modified 的值只能精确到秒

2、文件如果每隔一段时间都会重复生成，但是内容相同。服务器就会检测到新的时间更新，last-modified都会每次返回200和新的资源文件与资源标识，即便内容相同。但ETag能判断出文件的内容相同，就会返回304，使用缓存。

29、浏览器缓存的原理相关推荐

最新文章

热门文章