一、什么是浏览器缓存?
浏览器缓存就是把一个已经请求过得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