浏览器缓存机制

前言

一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。

浏览器缓存可以帮助我们在第一和第三步骤中优化性能:比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。

缓存位置

浏览器缓存共有四种，且有一定的优先级，当所有缓存都没有命中时才回去进行网络请求。

1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache

Service Worker

Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

1. 注册Service worker :在你的index.html加入以下内容

/* 判断当前浏览器是否支持serviceWorker */
    if ('serviceWorker' in navigator) {
   
        /* 当页面加载完成就创建一个serviceWorker */
        window.addEventListener('load', function () {
   
            /* 创建并指定对应的执行内容 */
            /* scope 参数是可选的，可以用来指定你想让 service worker 控制的内容的子目录。 在这个例子里，我们指定了 '/'，表示 根网域下的所有内容。这也是默认值。 */
            navigator.serviceWorker.register('./serviceWorker.js', {
   scope: './'})
                .then(function (registration) {