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

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

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

学下这个技术,让你的前端网页快20%

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

学下这个技术,让你的前端网页快20%

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

学下这个技术,让你的前端网页快20%

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

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

学下这个技术,让你的前端网页快20%

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

学下这个技术,让你的前端网页快20%

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

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/48404.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2022年7月4日 01:39
下一篇 2022年7月4日 01:39

相关推荐

  • 企业网站如何提升用户体验度。

    1.网站建设过程中关于搜索引擎、关键词、flash的问题企业网站建好之后,登录搜索引擎帮助客户找到你的网站,这是网络营销中非常重要的一环。搜索引擎的机制各不相同,但大部分都支持关键词。你需要找出和自己公司...

    2022年9月10日
    069
  • 印刷的图档与一般网页设计的图档有何不同。

    很多客户经常说,网页的内容应该直接打印成印刷品。这种观念亟待纠正。现在,我们来做一个解释:很多人的问题是,他们在制作图片和文件,用于作为网页打印,打印出来往往很恐怖。最大的问题是他们不了解印刷的特点...

    2022年9月10日
    066
  • 网站虚拟主机应当如何选购。

    你知道网站选择吗?随着网络的不断发展和扩大,大大小小的企业开始着手网络营销,传统行业网站也开始改变时代,进入新时代的热潮。所谓专业的建站者,对于网站的硬件设备要跟上时代的发展,就像网站虚拟主机的选...

    2022年9月10日
    077
  • 做SEO优化该如何判定产品关键词的排名难度呢。

    企业SEO优化,简单来说就是将核心的产品关键词排在搜索引擎的首页,让用户在选择相关信息时看到企业的网站,然后点击企业的网站,了解企业的产品。所以企业做好SEO优化更重要。 那么,企业在做SEO优化时,如何判...

    2022年9月10日
    066
  • 外贸网站设计这样做才靠谱。

    在外贸网站建设中,怎么把外贸网站规划做得更好?杭州蒙特外贸网站建设经过多年网站建设经验积累,总结了以下外贸网站建设、外贸网站设计经验,一起和大家分享。 一、网站规划要挑选专业人 随着社会的竞争越来越剧...

    2022年7月4日
    0111
  • 如何做高端网站建设有何技巧。

    随着互联网行业的发展,越来越多的企业开始建立自己的网站。如今,建立一个好的网站并不容易。如何建设高端网站有哪些技巧? 网站建设到底是什么?事实上,网站建设是一个广义的术语,涵盖了网站制作和维护中使用...

    2022年9月10日
    059
  • 网站地图建立的几个要点是什么。

    网站地图的建立有哪些要点?网站是一个网站的所有连续容器。它为饥饿的SEO搜索引擎提供食物。至少,网站应该包括你的第一个网页的相邻内容或栏目链接。根据你网站的大小和页面数量,它可以连接主要的部门页面或者...

    2022年9月10日
    061
  • 如何判断你的网站已经被谷歌收录

    搜索引擎优化是帮助搜索引擎了解网站和呈现网站的内容,同时还能帮助用户发现网站的内容,以满足用户的需求。下面就以Google为主题,与大家一起分析相关的网站优化问题。 相关术语 要了解网站优化,首先要知道网...

    2018年1月31日
    0191

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息