浏览器的缓存机制

缓存类型

缓存在宏观上可以分成两类:私有缓存和共享缓存。共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的,各级代理不能缓存的缓存。

微观上可以分下面几类:

  1. 浏览器缓存

缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应。尤其是在多页应用的网站中,如果你在多个页面使用了一张相同的图片,那么缓存这张图片就变得特别的有用。浏览器先向代理服务器发起Web请求,再将请求转发到源服务器。其中浏览器缓存包括强缓存和协商缓存,下文有详细介绍。本文主要侧重点就是针对于浏览器缓存。

2.CDN缓存
  CDN缓存一般是由网站管理员自己部署,为了让他们的网站更容易扩展并获得更好的性能。通常情况下,浏览器先向CDN网关发起Web请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。从浏览器角度来看,整个CDN就是一个源服务器,从这个层面来说,浏览器和服务器之间的缓存机制,在这种架构下同样适用。

3.代理服务器缓存
  代理服务器是浏览器和源服务器之间的中间服务器,代理转发响应时,缓存代理会预先将资源的副本(缓存)保存到代理服务器上。当代理再次接收到对相同资源的请求时,就可以不从源服务器那里获取资源,而是将之前缓存的资源作为响应返回。

4.数据库缓存
  数据库缓存是指,当web应用的关系比较复杂,数据库中的表很多的时候,如果频繁进行数据库查询,很容易导致数据库不堪重荷。为了提供查询的性能,将查询后的数据放到内存中进行缓存,下次查询时,直接从内存缓存直接返回,提供响应效率。

5.应用层缓存
  应用层缓存是指我们在代码层面上做的缓存。通过代码逻辑,把曾经请求过的数据或资源等,缓存起来,再次需要数据时通过逻辑上的处理选择可用的缓存的数据。

浏览器缓存

浏览器缓存就是把一个已经请求过的 web 资源拷贝一份存储在浏览器中,当下次请求相同的资源时,浏览器会根据缓存机制决定直接使用副本响应访问请求还是再次向服务器发送请求。
浏览器的缓存机制

优点

1.减少了冗余的数据传输
2.减少了服务器的负担,大大提升了网站的性能
3.加快了客户端加载网页的速度

缓存位置

  • Memory Cache
  • Disk Cache

from memory cache与from disk cache

强缓存和协商缓存

两者的主要区别是使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效。

强缓存

浏览器在加载资源时,会先根据本地缓存资源的 header 中的信息判断是否命中强缓存,如果命中则直接使用缓存中的资源不会再向服务器发送请求。

协商缓存

当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据 header 中的部分信息来判断是否命中缓存。如果命中,则返回 304 ,告诉浏览器资源未更新,可使用本地的缓存。
前端缓存最佳实践
一文读懂前端缓存
从前端角度理解缓存

禁用浏览器缓存

在 Network 中有个 Disable cache ,钩上就可以了,钩上后浏览器会忽略掉文档过期验证和服务器再验证的过程,直接向服务器请求最新的资源。
浏览器的缓存机制

用户行为影响

  • 地址栏访问,链接跳转是正常用户行为,将会触发浏览器缓存机制;
  • F5刷新,浏览器会设置max-age=0,跳过强缓存判断,会进行协商缓存判断;
  • ctrl+F5刷新,跳过强缓存和协商缓存,直接从服务器拉取资源。

浏览器的缓存机制

题外话:
大公司的静态资源优化方案:

  • 配置超长时间的本地缓存 —— 节省带宽,提高性能
  • 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
  • 静态资源CDN部署 —— 优化网络请求
  • 更资源发布路径实现非覆盖式发布 —— 平滑升级

作者:张云龙
链接:https://www.zhihu.com/questio...
感觉讲的非常棒!!!

相关推荐