web worker
JavaScript
是单线程的,遇到计算密集型或高延迟的任务时,会影响整个页面的运行。Web Worker
就是在这样的环境下诞生的,为JavaScript
创造多线程环境,所以多线程能力并不是JavaScript
原生具有的,而实浏览器宿主环境提供的!另外,Web Worker
需要手动关闭,否则会一直运行。
主线程和web worker
线程通过 postMessage()
传递数据,其实是数据的序列化与反序列化的过程,涉及的算法是结构化克隆算法,通过 SharedArrayBuffer
实现主线程和web worker
线程的内存共享!
sharded worker
一个共享的web worker
普通的web worker
直接使用new Worker()
创建,是当前页面专有的。而shared worker
可以多个标签页面、iframe
共享。当然,这些页面必须是同源的!
# 页面A
var myWorker = new SharedWorker("worker.js");
myWorker.port.onmessage = function(e) {
console.log(e.data) // Hello AA
}
button.onclick = () => {
myWorker.port.postMessage({type: 'AA', data: 'Hello BB'});
}
# 页面B
var myWorker = new SharedWorker("worker.js");
myWorker.port.onmessage = function(e) {
console.log(e.data) // Hello BB
}
button.onclick = () => {
myWorker.port.postMessage({type: 'BB', data: 'Hello AA'});
}
# worker.js
var AA = null, BB = null
onconnect = function(e) {
var port = e.ports[0];
// 被动推送
port.onmessage = function(e) {
var { type, data } = e.data
if(type === 'AA') {
AA = data
port.postMessage(BB);
} else if(type === 'BB') {
BB = data
port.postMessage(AA);
}
}
}
service worker
Service Worker
实际上是浏览器和服务器之间的代理服务器;
最大的特点就是在页面中注册并安装成功后,运行于浏览器后台,且不受页面刷新的影响,可以监听和拦截作用域范围内所有页面HTTP
请求。
功能特性:离线缓存,转发请求、网络代理、伪造响应、消息推送。
缓存时使用的API:Cache、CacheStorage
-
Cache
是单个缓存库 -
CacheStorage
是一个管理着所有Cache
的库
MDN:
Service worker
是Web Worker
的一种,运行在worker
上下文,因此它不能访问DOM
和Window
,可以利用self
访问全局上下文。相对于驱动应用的JS
主线程,它运行在其他线程中,所以不会造成阻塞。它设计为完全异步,同步API
如XHR、localStorage
不能在Service worker
中使用。
MDN:出于安全考量,
Service worker
只能由HTTPS
承载,毕竟修改网络请求的能力暴露给中间人攻击会非常危险。在Firefox
浏览器的用户隐私模式,Service Worker
不可用。
PS:本地服务器(127.0.0.1 / localhost
)也是可以的!
注意:Service workers大量使用Promise,因为通常它们会等待响应后继续,并根据响应返回一个成功或者失败的操作。Promise非常适合这种场景。
MDN:注意:
Service worker
更优于以前的同类尝试如AppCache
,是因为它们无法支持当操作出错时终止操作。Service worker
可以更细致地控制每一件事情。
生命周期
serviceworker.png- 安装
当浏览器加载运行了Service Worker
页面时,Service Worker
的JS
文件也被下载下到本地,然后运行安装,下载相关缓存。安装完之后,就会激活Service Worker (Activated)
- 激活
激活Service Worker
后,Service Worker
开始控制页面后台,当刷新页面或发送请求时,在Service Worker
中对请求进行拦截,然后进行相应的操作,比如检查是否命中缓存(尤其是无网络或网络差的情况下),如果命中,则优先返回。 - 等待
- 销毁(解雇)
Service Worker
在浏览器运行时,每隔一段时间就会在后台尝试重新下载Service Worker
的JS
文件,只要新的JS
文件和本地有一点不相同,那么就会重新 安装 ->
激活。
Service Worker
也是PWA
的实现方式之一:浏览器离线和弱网络环境实现急速访问。
webbox
然而,在 Service Worker
中通过监听事件,编写对应的逻辑并不是一件简单的事情,尤其是对于文件缓存,可能 npm run build
后,名称随时都会变。所以,Chrome
官方推出了 webbox
框架。
webbox
是用于向 web
应用程序添加离线支持的JavaScript
库。
网友评论