上一讲我们说到了HTTP缓存,这一讲的缓存并不单单指HTTP缓存
资源缓存
浏览器提供了多种缓存方式
- Memory Cache(内存)
- Service Worker Cache
- HTTP Cache
- Push Cache
Memory Cache,就是将资源缓存到内存中,等待下次访问时不需要重新下载资源,而直接从内存中获取。Webkit早已支持Memory Cache。在刷新页面时就会使用内存缓存,如图,第一次打开网页时先从磁盘缓存中读取了资源
然后刷新页面,就会从内存中加载资源
内存缓存是“最短命”的一种缓存,在页面关闭之后缓存就会从内存中释放
service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。它的特性将包括推送消息,背景后台同步, geofencing(地理围栏定位),拦截和处理网络请求。它可以使你的应用先访问本地缓存资源,所以在离线状态时,在没有通过网络接收到更多的数据前,仍可以提供基本的功能(一般称之为 Offline First)。前提是必须是HTTPS协议才可以,而且必须注册以后才可用
Push Cache(推送缓存)是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂,在Chrome浏览器中只有5分钟左右,同时它也并非严格执行HTTP头中的缓存指令。
本地存储
打开开发者工具的应用程序选项就可以看到浏览器提供的本地存储方案
现在的网页应用基本上不是原来的网页了,现在基本都是应该叫做WebApp,webApp的成型过程中,浏览器提供的存储功能提供了清理的支持
因为HTTP是无状态的请求,所以怎么保持状态是一个问题,cookie的出现就是为了解决这个问题。Cookie 说白了就是一个存储在浏览器里的一个小小的文本文件,它附着在 HTTP 请求上,在浏览器和服务器之间“飞来飞去”。它可以携带用户信息,当服务器检查 Cookie 的时候,便可以获取到客户端的状态。
但是cookie还是有缺陷的:
- 不够大,cookie的体积上限是4kB,超过4kB将会被裁剪
- 影响性能,cookie会被每次请求携带,无形之中增加了请求的体积,如果请求次数太多将会增加很多没有必要的传输
为了解决cookie的缺陷,web stroage出现了,web stroage有两种形式,localStroage和sessionStroage。它们二者的不同是sessionStroage生命周期是会话级,localStroage是持久化;作用域方面,localStroage只要是在同源下都可以访问,而sessionStroage只在当前窗口生效,再打开另一个窗口无法共享,通过a标签的target =“_blank”
属性打开新窗口时可以共享sessionStroage 本文正在参与「掘金小册免费学啦!」活动, 点击查看活动详情