service-worker block 住异步加载的文件

 

service worker 作为pwa相关技术最核心的一部分,可以提前下载相关的文件,预先做到缓存效果,今天使用了一下,发现了一个比较严重的问题,项目为了性能,很多页面和模块做了分片加载,有一些图片的内容。

使用了service worker之后,分片加载的内容(37,38)以及图片资源(banner.jpg)都被service worker的下载进程block住了,严重影响了加载速度。

尝试解决这个问题:

使用  setTimeout(()=> { … }, 0)  ,让service worker 的注册从住进程,切换到事件队列中,发现并没有影响,把delay的值增加到 1000,依然存在block的现象。

分析下时序图

发现service-worker  和vendor,mainifest同时下载下来的,并且由于体积比较小,比verdor,mainifest 先下载完,于是触发了预缓存策略,找到问题所在,就好办了

我们把service worker的注册放到vendor,打包起来,就可以解决我们的问题了