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,打包起来,就可以解决我们的问题了

使用Docker运行gixy

gixy是一个nginx配置检查工具,可以帮你分析你的nginx.conf,给出更好的建议,需要使用python3来安装,可惜的是,我本机的python是2的版本,而我又不想去更换,于是我想到了Docker。

首先,我们来写一个Dockerfile,内容很简单,就是从拉取一个python:3-alpine的基础镜像,这个镜像比较小。只需要简单的在里面用pip 安装一个gixy,并且设置ENTRYPOINT为gixy。

我们使用 docker build 命令,将dockerfile打包成镜像,简单写了个shell脚本,这样不用每次都打命令行。

看看效果如何,有个警告信息,gixy运行正常

 

使用padding实现自适应的百分比正方形

现在有个需求,宽度25%的li,要实现高度的自适应,现在有下面几种方式可以实现


1,设置box-sizing为border-box,去除掉多余的像素,将高度设置为0,内部的padding设置为12.5%,宽度设置为25%,padding的百分比是根据所在block的宽度来确定的,所以设置padding的时候,可以做到正方形

2,一个叫做vw的单位,这个单位可能大家很陌生,相应的还有vh这个单位,vw的作用就是相对于

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

设置的width,1vw等于1%的viewport宽度,所以我们只需要设置高为25vw就可以做到自适应高度

3,使用正方形图片,设置宽度为100%,可以实现撑开li 的作用,这里就不演示了