浏览器缓存机制

一、什么是浏览器缓存？

       浏览器缓存就是把一个已经请求过得web资源（如HTML页面，图片，js，数据）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。

二、为什么使用缓存？

（1）减少网络带宽消耗

（2）降低服务器压力

（3）减少网络延迟，加快页面打开速度

三、浏览器缓存的控制：

（1）使用meta标签：<meta http-equiv="Pragma" content="no-cache">  
<!- Pragma是http1.0版本中给客户端设定缓存方式之一，具体作用会在后面详细介绍 -->

上述代码告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。

<meta http-equiv="cache-control" content="no-cache">

常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

no-cache表示客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。需要注意的是，no-cache这个名字有一点误导。设置了no-cache之后，并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。

<meta http-equiv="Expires" content="0">

指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问。

（2）cdn缓存

cdn（Content Delivery Network），即就是内容分发网络，就相当于是在客户端和服务端之间加一个cdn层，用户在浏览网站的时候，cdn会选择一个离用户最近的cdn边缘节点来响应用户的请求，这不但加快了用户体验速度也减轻了源服务器的负载。

cdn缓存工作原理：用户通过输入域名来访问页面，首先进行dns处理，dns解析服务器会将用户访问请求定位到离用户最近、负载最轻的cdn缓存服务器上，返回该cdn节点的ip地址，缓存服务器拿到数据后，一方面将数据返回浏览器，另一方面进行本地保存，之后再次访问，数据将从cdn缓存服务器中被返回。

（3）本地存储

二者都是针对数据进行本地存储的，区别是：

localstorage是永久存储，而sessionstorage当窗口关闭的时候失效。

localstorage对于同源窗口来说是可以共享的，但是sessionstorage在不同的窗口不共享。

感觉常见的区别就这两个吧，它们的操作也很简单，web storage拥有像getItem，setItem，clear等方法，不像cookie存储还得自己去封装一个，比较方便。

localStorage、sessionStorage、cookie区别

共同点：都是保存在浏览器端，且同源的。

区别：

Cookie：存储在用户本地终端上的数据，cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器端来回传递；cookie数据还有路径（path）的限制，可以限制cookie只属于某个路径下；存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。一般应用案例就是判断注册用户是否已经登录过该网站。

	Cookie	sessionStorage	localStorage
数据有效期	只在cookie设置的过期时间之前一直有效，即使窗口或浏览器关闭。	仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持	始终有效，窗口或浏览器关闭也一直保存，因此被用作持久数据
数据存储大小	cookie数据不能超过4k	可以达到5M或者更大	可以达到5M或者更大
作用域	在所有同源窗口中都是共享的。	不在不同的浏览器窗口中共享，即使是同一个页面。	在所有同源窗口中都是共享的。
数据存储位置	客户端浏览器	本地保存	本地保存
webStorage支持事件通知机制，可以将数据更新的通知发送给监听者。

清空一个页面的sessionStorage，另一个页面依旧有，而localStorage则不同。

浏览器的缓存机制：https://www.jianshu.com/p/54cc04190252

转载：https://blog.csdn.net/qq_32766999/article/details/96743593