学习前端技术栈ServiceWorker，让你的网页变快20%

有些人会认为，前端不就是切图然后展示么，有什么技术含量，学前端不如学习Php，此言差矣，这些年随着互联网的发展，前端技术变得越来越重要，生态圈也越来越发达，今天创新互联来介绍一个前端技术栈，ServiceWorker。

学习一个东西，我们先了解出现的背景以及解决了什么问题。随着互联网的发展，前端的页面越来越丰富。对比一下现在跟10年前的网页，你会有更深刻的体会。10年前，我们在PC上需要下载很多程序才能够操作的事情，今天在web端也能轻松完成。随着这个前端页面承载的功能越来越丰富，我们对网页的打开加载速度要求也越来越高，很多人也许会说，要加载快，不就换电脑，加大带宽就能完成了么？但实际上很多用户的PC更新换代非常慢，而且手机端的网络也并没有那么稳定，所以，我们需要一个技术，能够有丰富的离线体验、定期的后台同步以及推送通知等通常需要将面向本机应用的功能将引入到网页应用中，ServiceWorker诞生于此，ServiceWorker可以把网页以及一些静态资源缓存与本机。

ServiceWorker是怎么工作的呢？我们注册一个ServiceWorker的时候需要配置要缓存哪些资源，当我们请求的资源命中了之后，这个请求会被ServiceWorker代理，会先判断本地有没有现有的缓存，如果有的话，会直接返回，如果没有，会从后端服务器中获取，保存一份在本地缓存，然后再次返回，后续的同类型的请求就会命中到该缓存了。

相信有了上面ServiceWorker的背景跟它最核心的工作原理，要来理解ServiceWorker的生命周期并不难。ServiceWorker的生命周期是独立于网页本身的。一开始我们需要注册并安装ServiceWorker(当然不是我们理解的安装软件的安装，而是支持该功能的浏览器运行有注册安装ServiceWorker的Javascript代码的时候，自动注册安装)。然后我们的ServiceWorker就可以开始工作了，它会劫持用户配置的相关资源请求，进行处理。最后ServiceWorker也是会被销毁，结束他的一生。

最后，我们再来通过源码，简单地介绍东西是怎么运行的。

我们先注册一个ServiceWorker并且配置相关代理的资源，如图。我们配置了sw-test目录下面的部分页面、图片、js跟样式等。要注意的是，如果是被代理文件里面的如果用到外域的资源，也会被代理。

我们在处理请求的时候，如果命中被代理的文件，就会触发fetch事件，从而进行缓存数据替代线上请求。

好了，今天的ServiceWorker我们就简单介绍到这里，更多详细的东西大家可以进一步学习，有什么疑问可以一起讨论，一起学习进步。

本文名称：学习前端技术栈ServiceWorker，让你的网页变快20%
文章网址：/news20/104070.html

成都网站建设公司_创新互联，为您提供自适应网站、网页设计公司、网站建设、云服务器、外贸建站、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联