关于service:前端缓存机制提升网站性能-Service-Worker

28次阅读

共计 658 个字符,预计需要花费 2 分钟才能阅读完成。

PWA 简介

PWA(Progressive Web Apps)不是特指某一项技术,而是利用多项技术来改善用户体验的 Web App,为 Web App 提供相似 Native App 的用户体验。
其核心技术包含 Web App Manifest,Web Push,Service Worker 和 Cache Api 等,用户体验才是 PWA 的外围。

PWA 次要特点如下:

牢靠 – 即便在网络不稳固甚至断网的环境下,也能霎时加载并展示
用户体验 – 疾速响应,具备平滑的过渡动画及用户操作的反馈
用户黏性 – 和 Native App 一样,能够被增加到桌面,能承受离线告诉,具备沉迷式的用户体验

写在后面

文章不具体解说 PWA 技术细节,如果对 PWA 技术感兴趣,文末筹备了一些材料,能够参考学习
此次调研目标并非为网站残缺接入 PWA 技术,而是利用其缓存机制晋升网站性能
次要用到的技术为 Service Worker + Cache Api

前端多级缓存模型

浏览器 想要获取近程的数据时,咱们并不会立刻出发(发送申请 ),在计算机领域,很多性能问题都会通过减少缓存来解决,前端也不例外。
和许多后端服务一样,前端缓存也是多级的。

本地读取阶段,这个阶段咱们不会发动任何 HTTP 申请,只在本地读取数据作为响应
HTTP request 阶段,这个阶段咱们发动了 HTTP 申请,然而数据仍然是从本地读取。目前为止,咱们可能还没有收回一个真正的申请。这也意味着,在缓存查看阶段咱们就会有很多机会将后续的性能问题扼杀在摇篮之中
真正申请阶段,如果很可怜本地没有任何无效数据,这时候才会发动真正的申请
前端多级缓存具体流程图如下:

正文完
 0