缓存技术之Service Worker缓存-生命周期-注册8月更文挑战前言若想更好的将Service Worker的

这是我参与8月更文挑战的第20天，活动详情查看： 8月更文挑战

前言

若想更好的将Service Worker的特性应用到实际项目中，来为用户提供零感知的性能优化体验，那么其生命周期就是必须要熟知的。

Service Worker生命周期

Service Worker生命周期的各个环节如图所示：

未命名文件 (1).png

首先来看一下使用Service Worker的大致过程：通常每一个Service Worker都会依赖于各自独立的执行脚本，在页面需要使用时通过请求相应的执行脚本进行Service Worker的注册；当注册流程启动后，便可在执行脚本中监听install事件来判断安装是否成功，若安装成功则可进行有关离线缓存的处理操作。

但此时的安装成功并不意味着Service Worker已经能够取得页面的控制权，只有进行激活后，Service Worker才能监听页面发出的fetch和push等事件；如果Service Worker的执行脚本发生修改需要进行更新，则更新的流程也会涉及完整的生命周期。上图为Service Worker生命周期所涉及的五个关键状态，依次记录每个状态中所包含的关键处理操作。

注册

目前对于Service Worker的兼容性来看，依然存在一些浏览器尚未支持的场景，因此在注册之前，需要判断全局环境中是否存在注册Service Worker所需的API，再进行相应的注册操作，具体代码示例如下：

//仅当浏览器支持Service Worker的场景下进行相应的注册  
if('serviceWorker'in navigator)(  
  navigator.serviceWorker.register('/service-worker.)s';  
)

虽然上述代码能够完成对Service Worker的注册，但是该代码段位于JavaScript脚本的主流程中，它的执行需要请求加载service-worker.js文件，这就意味着在用户访问网站时的首屏渲染可能会被阻塞，进而降低用户体验。
对此进行优化十分简单的方法便是当页面完成加载后再启动Service Worker的注册操作，可以通过监听load事件来获取页面完成加载的时间点，优化后的代码如下：

if('serviceWorker'in navigator)(  
  //在页面完成加载后进行Service Worker的注册操作  
  window,addEventListener(load',()=>(  
  navigator.serviceWorker.register('/service-worker. js');  
))

在进行性能优化的过程中，经常会遇到类似的情况：引入一项技术带来了某方面性能提升的同时，也可能造成另一方面性能体验的降低。比如这里Service Worker可以丰富离线体验，提高开发者对缓存处理的自定义度，但如果不细致考虑资源加载的最佳时机，就很容易造成上述首屏渲染变慢的糟糕体验。
因此在引入任何优化方案时，都需要对优化前后的性能表现进行充分的测试，以避免出现优化方案使得性能指标A提升，但却导致性能指标B下降。