Service Worker和HTTP缓存

很多人,包括我自己,初看Service Worker多一个Cache Storage的时候,就感觉跟HTTP长缓存没什么区别。 例如大家讲的最多的Service Worker能让网页离线使用,但熟悉HTTP缓存的朋友,会发现,把整站所有资源设置为长缓存(不带校验),也可以实现离线使用。

那么,Service Worker在缓存方面和HTTP缓存比较,有什么好处呢?

带着这个疑问,我翻阅了一些大神博客 JakeArchibald的《Caching best practices & max-age gotchas》 李熠的《设计一个无懈可击的浏览器缓存方案:关于思路,细节,ServiceWorker,以及HTTP/2

根据实际项目经验,总结出以下。

Service worker除了针对PWA(推送和消息)以外,对普通web来说,在缓存方面,能比http缓存带来一些额外的好处。 可以理解为,SW就是浏览器把缓存管理开放一层接口给开发者。

1、改写默认行为。

例如,浏览器默认在刷新时,会对所有资源都重新发起请求,即使缓存还是有效期内,而使用了SW,就可以改写这个行为,直接返回缓存。

2、缓存和更新并存。

要让网页离线使用,就需要整站使用长缓存,包括HTML。而HTML使用了长缓存,就无法及时更新(浏览器没有开放接口直接删除某个html缓存)。而使用SW就可以,每次先使用缓存部分,然后再发起SW js的请求,这个请求我们可以实施变更,修改HTML版本,重新缓存一份。那么用户下次打开就可以看到新版本了。

3、无侵入式。

无侵入式版本控制。最优的版本控制,一般是HTML中记录所有js css的文件名(HASH),然后按需发起请求。每个资源都长缓存。而这个过程,就需要改变了项目结构,至少多一个js或者一段js控制版本号,发起请求时还需要url中注入冬天的文件名。使用了SW,就可以把这部分非业务逻辑整合到sw js中。 无侵入式请求统计。例如缓存比例统计、图片404统计。

4、额外缓存。

HTTP缓存空间有限,容易被冲掉。虽然部分浏览器实现SW的存储也有淘汰机制,但多一层缓存,命中的概率就要更高了。

5、离线处理。

当监测到离线,而且又没有缓存某个图片时,可以做特殊处理,返回离线的提示。又或者做一个纯前端的404/断网页面。类似Chrome的小恐龙页面。

6、预加载资源。

这个类似prefetch标签。

7、前置处理。

例如校验html/JS是否被运营商劫持?js文件到了UI进程执行后,就无法删除恶意代码,而在SW中,我们可以当作文本一样,轻松解决。当然,在HTTPS环境下出现劫持的概率是极低的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏desperate633

深入分析Redis特点及应用场景Redis的特点:Redis的优势:Redis与其他key-value存储有什么不同?Redis应用场景2. 删除与过滤3. 排行榜相关

在Web应用中,“列出最新的回复”之类的查询非常普遍,这通常会带来可扩展性问题。这令人沮丧,因为项目本来就是按这个顺序被创建的,但要输出这个顺序却不得不进行排序...

1022
来自专栏KaliArch

MongoDB基础

MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统。在高负载的情况下,添加更多的节点,可以保证服务器性能。MongoDB 旨在为WE...

1816
来自专栏架构师之路

线上服务内存OOM问题定位三板斧

相信大家都有感触,线上服务内存OOM的问题,是最难定位的问题,不过归根结底,最常见的原因: 本身资源不够 申请的太多 资源耗尽 58到家架构部,运维部,58速运...

2946
来自专栏架构师之路

InnoDB,能将数据存储在DVD里?

2. alter table可以不拷贝表了,且不阻塞写操作,online DDL,酷炫吧。

651
来自专栏木子昭的博客

Python3简单实现多任务(多进程篇)第一种:进程池快速创建(适合创建大量进程,简单,推荐!)第二种实现方式(Process创建进程,需要手动管理)第三种实现方式(windows无法使用,只能在类U

python多进程实现多任务 优点:稳定性高;提升程序执行效率 第一种:进程池快速创建(适合创建大量进程,简单,推荐!) ? image.png fro...

35110
来自专栏向治洪

Node.js原理

概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动,...

2606
来自专栏smy

chrome浏览器Timing内各字段解析

Queueing 请求文件顺序的的排序 ? Stalled 是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接...

2875
来自专栏蓝天

为什么ps中CPU占用率会有超出%100的现象?

前面的关于ps中的%CPU的含义一文已经介绍了CPU占用率的含义,那么为什么有时会在ps的输出中看到CPU占用率超出%100的现象呢?我们知道在/proc目录下...

792
来自专栏北京马哥教育

基础拾掇之——http基础

http协议介绍 http:Hyper Text Transfer Protocol 超文本传输协议,是互联网应用最为广泛的一种网络协议,主要用于Web服务。通...

2405
来自专栏互联网技术栈

Log4j1升级Log4j2实战

新的Log4j 2.0版本有了大幅的性能提升、新的插件系统,以及配置设置方面的很多改善。Log4j 1.x 在高并发情况下出现死锁导致cpu使用率异常飙升,而L...

893

扫码关注云+社区