浏览器缓存

what？

简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。
缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。
复制代码

why ?

1 减少网络宽带消耗
2 减少服务器的压力
3 降级网络延迟， 加快页面响应
复制代码

how？

主要是针对网络请求做处理。而一个网络请求包括了三部分：请求， 处理， 响应。 从而发现我们能通过请求和响应两部分进行做优化。
请求： 浏览器缓存部分资源 减少向后端发送请求。
响应： 减少响应主体的体积，可缩短响应时间。
复制代码

通过下面内容来了解如何去优化缓存

缓存的重要几个储存位置

• serverWorker
• memory cache
• disk cache

serverWorker

serverWorker 是一个脚本。作为一个独立的线程在后台独立运行。提供了离线体验消息推送等，不同于其他cacheta
它是不受浏览器控制的， 所以完全可以自己实现缓存控制所以更加灵活方便
使用： 
     1 install  navigator.serviceWorker.register('./sw.js')
     2 onInstall
		self.addEventListener('install', function (evt) {
			evt.waitUntil(
				caches.open('my-test-cahce-v2').then(function (cache) {
				return cache.addAll(cacheFiles);
				})
			);
		});
     3 onFetch
       
		self.addEventListener('fetch', function (evt) {
			evt.respondWith(
			caches.match(evt.request).then(function(response) {
				if (response) {
					return response;
				}
				var request = evt.request.clone();
				return fetch(request).then(function (response) {
					var responseClone = response.clone();
					caches.open('my-test-cache-v2').then(function (cache) {
						cache.put(evt.request, responseClone);
					});
					return response;
					});
				})
			)
		});


同时serverWorker缓存的时间是永久的除非是自己手动删除，或者超过容量。
另外使用serverWorker的使用也是受限制的必须使用https（localhost除外）
复制代码

memory cache

• 1 浏览器暂时将资源缓存在内存中不受开发者控制的,会根据本地内存的使用率来决定缓存存放在哪. 在大小，时间上都有限制。 缓存的时间在浏览器tab关闭的时候将会被清除。
• 2 由于memory cache 机制 所以一个页面内相同的请求都会只被发送一次 比如相同的link，src

disk cache

• 1 将资源缓存在硬盘上， 通过http 头部可以控制那些资源可以被缓存，及资源可以被缓存多长时间。 所以也可以称为http缓存，
• 2 HTTP报文中与缓存相关的首部字段

根据上面流程图所以头部字段大概可以分为下面几类
1 控制是否缓存

    cache-control
    	· no-cache: 强制服务器再次验证
    	· no-store: 不缓存请求或是响应的任何内容
    	· must-revalidate：如果超过了 max-age 的时间，浏览器必须向服务器发送请求，验证资源是否还有效
    	· public：所有的内容都可以被缓存 (包括客户端和代理服务器， 如 CDN)
    	· private：所有的内容只有客户端才可以缓存，代理服务器不能缓存。默认值。
2 缓存时间
    Expires， max-age
    	· max-age: 缓存的时长

3 失效校验
    ETag, If-None-Match, If-Modified-Since, Last-Modified ...
    响应首部：
    	· ETag: 服务器生成资源的唯一标识
    	· Last-Modified: 资源最后一次修改的时间 

    请求首部
    	· If-None-Match: 服务器根据这个字段判断文件是否有新的修改
    	· If-Modified-Since: 比较资源前后两次访问最后的修改时间是否一致

转载于:https://juejin.im/post/5be6e31e6fb9a049b3477ddf