代码已经与github关联。 即使链接到的文章有更新，也会优先于此。 如果觉得可以的话，我会在点个star上继续分享自己的开发经验(
如果浏览器缓存浏览器并重新发送请求：
首先确定强缓存，强缓存有效，直接使用强缓存(200 from memory，from disk首先从内存中、 然后从硬盘) )如果强缓存未启用，则确定未设置协商缓存并直接请求重新发送) 200 )如果设置了协商缓存，则服务器确定缓存是否无效，如果未禁用，则使用缓存如果已禁用，则返回新文件的(200 )缓存分类强缓存强缓存主要由两个Header确定：响应标头Cache-Control和Expires，在一段时间内不请求后端，而是在存储器或磁盘中
cache-control 3360 max-age=31536000//缓存时间| no-store :禁止本地缓存| no-cache :强制每次请求直接发送到源服务器确定服务器是否使用缓存cache-control3360ppps的max-age=31536000 //默认值为public允许Expires: Wed代理，从而为21 oct 2020 0733330 也可以设定请求在该时间以后过期的Cache-control的优先顺序比Expires的优先顺序高的注意请求头的头
一般情况下，不经常更改的JS和CSS有很大的有效期。 合并版本号以制定缓存策略，减少对后端的请求。 如果不需要只设置版本号，则浏览器会自动具有缓存策略。
在某些情况下，会显示缓存控制： max-age=31536000，但是浏览器框架中的是否要将此数据缓存到一年？ 答案当然是否定的。 该值是协议允许的最大值，因此浏览器不会缓存太久。 缓存已满时优先删除旧内容，但CDN可以这样做以减少服务器压力
协商缓存由If-none-match/ETags和if-modified-since/last-modified参数确定，通常在禁用强缓存后通信到服务端
ETags是服务器资源的唯一标识符，在请求响应时，标头会带来该唯一标识符。 请求标头将带来上次请求返回的无符号匹配(etag )，服务器将确定资源是否已更改。 请求响应时标头带有上次修改时间(Last-Modified )，请求时标头带有此修改时间(If-Modified-Since )，服务器确定资源是否已更改。 对于经常更改的资源，服务器端将浏览器设置为每次向服务器请求Cache-Control: no-cache，然后增加回复请求标头ETag或Last-Modified以验证资源是否有效这种方法虽然不能节省请求数量，但可以大大减少响应数据的大小。
版本号revving技术：对于不经常更新的文件，使用特定的命名方法。 URL之后通常是文件名之后的版本号。 服务work是服务和浏览器之间的中介角色，只要站点注册了服务worker，就可以阻止并确定当前站点的所有请求。 如果需要编写适当的判断程序，则将其传输到服务器；如果缓存可以直接使用，则不再返回缓存并传输到服务器。
使用Service Worker的简单方法是用JavaScript编写的脚本，浏览器在后台独立于网页运行。
看看最小的服务工作器的长度和奔跑方式：
//除了防止误报外，如果PWA的p//浏览器不支持Service Worker，一行if就什么都没发生(serviceworker'innavigator ) window.addow //scope参数是可选的，可用于指定希望Service Worker控制的内容的子目录。 在本例中，我们指定了“/”来表示根域下的所有内容。 这也是默认值。 navigator.service worker.register (/service-worker.js )，{scope:'./'}.then ) function )，registration，和)； )； }复制了代码以上的代码，在load事件发生后，下载并注册了名为service-worker.js的文件。 服务工作器的逻辑写在这里：
// service-worker.js//中可以按照自己喜欢的方式写任何js代码，或者
者也可以什么都不写，// 都不妨碍这是一个Service Worker，但还是举一个微小的例子：//监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑this.addEventListener('install', function(event) { //通过这个方法可以防止缓存未完成，就关闭serviceWorker event.waitUntil( //caches api: https://developer.mozilla.org/zh-CN/docs/Web/API/CacheStorage caches.open('v1').then(function(cache) { //指定要缓存的内容，地址为相对于跟域名的访问路径 return cache.addAll([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyHunters.jpg', '/sw-test/gallery/myLittleVader.jpg', '/sw-test/gallery/snowTroopers.jpg' ]); }) );});//监听fetch,拦截请求this.addEventListener('fetch', function(event) { var response; event.respondWith( caches.match(event.request).then(function(response) { if (response) { console.log('Found response in cache:', response); return response; } console.log('No response found in cache. About to fetch from network...'); return fetch(event.request).then(function(response) { console.log('Response from network is:', response); caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function(error) { console.error('Fetching failed:', error); throw error; }); }) ); }); 应用 缓存静态资源，Service Worker的一大应用是可以利用CacheStorage API来缓存js、css、字体、图片等静态文件。我们可以在Service Worker的install阶段，指定需要缓存的具体文件，在fetch事件的回调函数中，检查请求的url，如果匹配了已缓存的资源，则不再从服务端获取，以此达到提升网页性能的目的。离线体验，将整个页面缓存下来，比如404页面。详细见：Service Worker 从入门到出门
缓存主要有4种：Service Worker 、Memory Cache、 Disk Cache 和 Push Cache
Service WorkerMemory Cache，内存中的缓存，主要包含的是当前中页面中已经抓取到的资源（一般是小资源），例如页面上已经下载的样式、脚本、图片等，读取速度快，但是持续时间短，一般页面关闭就被释放。Disk Cache，存储在硬盘中的缓存，能缓存各种资源，读取速度比内存慢，但是能缓存的数据多。Push Cache，推送缓存是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放。
刷新对于缓存的影响 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。当f5刷新网页时，跳过强缓存，但是会检查协商缓存。浏览器地址栏中写入URL，回车 浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。 参考
Service Worker 从入门到出门
浏览器帧的会缓存一年吗
有DNS的地方，就有缓存。浏览器、操作系统、Local DNS、根域名服务器，它们都会对DNS结果做一定程度的缓存：
首先查找浏览器自身的缓存然后是本机hosts，如果还是没有，则查找本地DNS服务器本地DNS服务器一般是动态分配的或者我们自己指定的地址(当然这里还有个路由器的缓存)再查找不到，则向根服务器发送递归查找，边缘DNS > 顶级DNS > 二级DNS > 三级DNS（也就是网站注册的） CDN缓存在浏览器本地缓存失效后,浏览器会向CDN边缘节点发起请求。类似浏览器缓存，CDN边缘节点也存在着一套缓存机制。CDN边缘节点缓存策略因服务商不同而不同，但一般都会遵循http标准协议，通过http响应头中的Cache-control判断资源是否过期
其优势是：