一文搞懂浏览器缓存机制 _小知识

最近在项目中遇到了 IE浏览器因缓存问题未能成功向后端发送 GET类型请求的bug ，然后顺藤摸瓜顺便看了看缓存的知识，觉得有必要总结跟大家分享一下。
在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
1. 介绍
web缓存是指一个web资源（如html页面，图片， js ，数据等）存在于web服务器和客户端（浏览器）之间的副本。
缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL ，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。至于浏览器和网站服务器是如何标识网站页面是否更新的机制，将在后面介绍。
1.1 web缓存的作用
web缓存的作用显而易见：

减少网络带宽消耗：无论对于网站运营者或者用户，带宽都代表着金钱，过多的带宽消耗，只会便宜了网络运营商。当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。
降低服务器压力：给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。
减少网络延迟，加快页面打开速度：带宽对于个人网站运营者来说是十分重要，而对于大型的互联网公司来说，可能有时因为钱多而真的不在乎。那Web缓存还有作用吗？答案是肯定的，对于最终用户，缓存的使用能够明显加快页面打开速度，达到更好的体验。

1.2 web缓存的类型
web缓存大致可以分为以下几种类型详细内容：

数据库数据缓存
服务器端缓存
浏览器端缓存
web应用层缓存

浏览器通过代理服务器向源服务器发起请求的原理如下图：

文章插图

浏览器先向代理服务器发起web请求，再将请求转发到源服务器。它属于共享缓存，所以很多地方都可以使用其缓存资源，因此对于节省流量有很大作用。
浏览器缓存是将文件保存在客户端，在同一个会话过程中会检查缓存的副本是否足够新，在后退网页时，访问过的资源可以从浏览器缓存中拿出使用。通过减少服务器处理请求的数量，用户将获得更快的体验
下面着重关注一下浏览器缓存。
2. web缓存的工作原理
所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务（假设有副本可用的情况下，未被销毁回收或者未被删除修改）。这些规则有的在协议中有定义（如HTTP协议1.0和1.1），有的则是由缓存的管理员设置（如DBA、浏览器的用户、代理服务器管理员或者应用开发者）。
2.1 浏览器端的缓存规则
对于浏览器端的缓存来讲，这些规则是在HTTP协议头和HTML页面的 Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是直接使用缓存中的副本，还是需要去源服务器获取更新的版本。