各种Worker

2022-08-07 1324 words 3 minutes

Contents

web worker

JS是单线程没有多线程，当JS在页面中运行长耗时同步任务的时候就会导致页面假死。为了解决这个问题，HTML5提供了新的APIweb worker，可以通开启一个独立的 JS 线程来运行这些高耗时的 JS 代码。

独立运行环境
- 一个独立于JavaScript主线程的线程，在里面执行需要消耗大量资源的操作不会堵塞主线程。
- worker一旦新建，就会一直运行，不会被主线程的活动打断。
作用域在本Tab页内。
- 只能服务于新建它的页面，不同页面之间不能共享同一个 Web Worker。
- 当页面关闭时，该页面新建的 Web Worker 也会随之关闭，不会常驻在浏览器中。
一个页面可以创建多个web worker。

同源限制 worker线程执行的脚本文件必须和主线程的脚本文件同源。
不能读取本地文件为了安全，worker线程无法读取本地文件，它所加载的脚本必须来自网络，且需要与主线程的脚本同源。
不能访问DOM

worker线程在与主线程的window不同的另一个全局上下文中运行，其中无法读取主线程所在网页的DOM对象，也不能获取 document、window等对象，但是可以获取navigator、location(只读)、XMLHttpRequest、setTimeout族等浏览器API。
通信限制 worker线程与主线程不在同一个上下文，不能直接通信，需要通过postMessage方法来通信。
脚本限制 worker线程不能执行alert、confirm，但可以使用发送请求

基于web worker，通过注册之后，可以独立于浏览器在后台运行，控制我们的一个或者多个页面。如果我们的页面在多个窗口中打开，Service Worker不会重复创建。

一般作为 Web 应用程序、浏览器和网络之间的代理服务。他们旨在创建有效的离线体验，拦截网络请求，以及根据网络是否可用采取合适的行动，更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步 API。

不能访问DOM
它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用。可以使用fetch替代XMLHttpRequest 实现异步请求(ajax)。
网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)

install -> installed -> actvating -> Active -> Activated -> Redundant

安装中、安装后、激活中、激活、激活后、我废了。

由同源的所有页面共享。

1、同一个js脚本只会创建一个 sharedWorker，其他页面再使用同样的脚本创建sharedWorker，会复用已创建的 worker，这个worker由几个页面共享。

2、 sharedWorker通过port来发送和接收消息