缓存、Service Worker和Workbox

一、缓存概述

缓存的作用

• 1、加快页面打开速度；
• 2、减少网络带宽消耗；
• 3、降低服务器压力。

web中应用缓存

• 1、浏览器缓存

  • 浏览器缓存下文有介绍缓存主要存在本地
  • CDN（CDN也属于服务器缓存）

• 2、页面缓存

  页面缓存是将动态页面直接生成静态的页面放在服务器端，用户调取相同页面时，静态页面将直接下载到客户端，不再需要通过程序的运行和数据库的访问，大大节约了服务器的负载。每次访问页面时，会检测相应的缓存页面是否存在，若不存在，则连接数据库得到数据渲染页面并生成缓存页面文件，这样下次访问的页面文件就发挥作用了。

• 3、服务器缓存

• 4、数据库缓存

  数据库的缓存一般由数据库提供，可以对表建立高速缓存。数据库中，用户可能多次执行相同的查询语句，为了提高查询效率，数据库会在内存划分一个专门的区域，用来存放用户最近执行的查询，这块区域就是缓存。数据库缓存的使用必须在一定的应用环境下：查询的数据库表不会经常变动、有大量相同的查询(如订单信息查询)。

前端缓存

• HTTP缓存
• 浏览器缓存

二、HTTP缓存

分为强缓存和协商缓存（两者主要区别是向服务器验证本地缓存是否依旧有效，协商缓存就是和服务器进行协商，最终确定是否用本地缓存）

强缓存

只要过期了就给你新资源，只要没过期就用之前前端缓存的内容。意味着就算服务器内容改变了，只要没过期我就不给你新的。

强缓存

协商缓存

服务器内容改变了就给你新内容，如果没改变就给你一个响应头设置了过期时间数据的话还是用前端缓存过的。

协商缓存

三、浏览器缓存

当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。

优点：

• 减少页面加载时间；
• 减少服务器负载。

四、DNS（Domain Name System）缓存

我们知道url其实只是一个别名，真实的服务器请求地址，实际上是一个IP地址。获得IP地址的方式，就是查询DNS映射表。虽然这是一个非常简单的查询，但如果每次用户访问一个url都去查询DNS一次，未免显得太频繁。DNS会告诉你，你别老是经常过来，万一我挂了，我们就无法愉快地玩耍了。

DNS查询过程大约消耗20毫秒，在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响，因此需要用到DNS缓存。

不同浏览器的缓存机制不同

• IE对DNS记录默认的缓存时间为30分钟；
• Firefox对DNS记录默认的缓存时间为1分钟；
• Chrome对DNS记录默认的缓存时间为1分钟。

缓存时间长：减少DNS的重复查找，节省时间。 缓存时间短：及时检测服务器的IP变化，保证访问的正确性。

五、CDN（Content Delivery Network）缓存

cdn缓存是一种服务端缓存，CDN服务商将源站的资源缓存到遍布全国的高性能加速节点上，当用户访问相应的业务资源时，用户会被调度至最接近的节点最近的节点ip返回给用户，在web性能优化中，它主要起到了，缓解源站压力，优化不同用户的访问速度与体验的作用。

客户端访问网站的过程

• 没有CDN：
  • 用户在浏览器访问栏中输入要访问的域名；
  • 浏览器向DNS服务器请求对该域名的解析；
  • DNS服务器返回该域名的IP地址给浏览器
  • 浏览器使用该IP地址向服务器请求内容。
  • 服务器将用户请求的内容返回给浏览器。
• 使用了CDN：

  • 1、用户在浏览器中输入要访问的域名。

  • 2、浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整，DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。

  • 3、CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。

  • 4、用户向CDN的负载均衡设备发起内容URL访问请求。

  • 5、CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务。

    选择的依据包括：根据用户IP地址，判断哪一台服务器距离用户最近；根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器的负载情况，判断哪一台服务器的负载较小。

    基于以上这些依据的综合分析之后，负载均衡设置会把缓存服务器的IP地址返回给用户。

  • 6、用户向缓存服务器发出请求。

  • 7、缓存服务器响应用户请求，将用户所需内容传送到用户。

    如果这台缓存服务器上并没有用户想要的内容，而负载均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉取到本地。

缓存规则

• 1、首次访问，下载网站的静态资源（如：JS、CSS、图片等）到本地，第二次访问浏览器从缓存中加载资源，不再请求服务器，提高网站访问速度；
• 2、使用CDN当浏览器缓存过期，浏览器不是直接向原站点请求资源，而是向CDN最近站点请求；
• 3、CDN最近站点也是有缓存的，如果缓存过期，那么就由CDN最近站点向原站点发送请求获取最新资源；
• 4、CDN节点缓存机制在不同服务商中是不同的，但一般都遵循HTTP协议，通过http响应头中的Cache-Control:max-age的字段来设置CDN节点文件缓存时间。当客户端向CDN节点请求数据时，CDN会判断缓存数据是否过期，若没有过期，则直接将缓存数据返回给客户端，否则就向源站点发出请求，从源站点拉取最新数据，更新本地缓存，并将最新数据返回给客户端。

CDN缓存时间会对“回源率”产生直接的影响，若CDN缓存时间短，则数据经常失效，导致频繁回源，增加了源站的负载，同时也增大了访问延时；若缓存时间长，数据更新时间慢，因此需要针对不同的业务需求来选择特定的数据缓存管理。

<script type="text/javascript" src="//j1.58cdn.com.cn/escstatic/appSdk/cstSdk/cst-new-app.js?cachevers=30"></script>
<script type="text/javascript" src="//j1.58cdn.com.cn/m58/postnew/util/js/esl_zepto.min_v20150420200700.js"></script>

我们可以给CDN加大缓存时间，然后通过版本号来控制引入的前端资源；如果有更新的话，直接更新资源后面拼接的版本号；在浏览器加载资源的时候由于资源URL的参数发生了变化，就形成了一个新的资源链接，这是向附近CDN站点请求时，是找不到资源的，然后在向原站点请求最新资源更新。

六、Service Worker

Service Worker

七、Workbox

Workbox