web worker

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

https://www.cnblogs.com/panmy/p/5764507.html
http://www.ruanyifeng.com/blog/2018/07/web-worker.html

service worker

一句话概括

一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。

以下是一些细碎的描述

  • 基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）
  • 在web worker的基础上增加了离线缓存的能力
  • 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->由开发者指定的动作）
  • 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
  • 由事件驱动的,具有生命周期
  • 可以访问cache和indexDB
  • 支持推送
  • 并且可以让开发者自己控制管理缓存的内容以及版本

如何使用

  1. 注册Service worker 在你的index.html加入以下内容
  1. /* 判断当前浏览器是否支持serviceWorker */
  2.     if ('serviceWorker' in navigator) {
  3.         /* 当页面加载完成就创建一个serviceWorker */
  4.         window.addEventListener('load', function () {
  5.             /* 创建并指定对应的执行内容 */
  6.             /* scope 参数是可选的，可以用来指定你想让 service worker 控制的内容的子目录。 在这个例子里，我们指定了 '/'，表示 根网域下的所有内容。这也是默认值。 */
  7.             navigator.serviceWorker.register('./serviceWorker.js', {scope: './'})
  8.                 .then(function (registration) {
  10.                     console.log('ServiceWorker registration successful with scope: ', registration.scope);
  11.                 })
  12.                 .catch(function (err) {
  14.                     console.log('ServiceWorker registration failed: ', err);
  15.                 });
  16.         });
  17.     }

  1. 安装worker：在我们指定的处理程序serviceWorker.js中书写对应的安装及拦截逻辑 ```javascript / 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 / this.addEventListener(‘install’, function (event) {

    / 通过这个方法可以防止缓存未完成，就关闭serviceWorker / event.waitUntil(

    1.  /* 创建一个名叫V1的缓存版本 */
    2.  caches.open('v1').then(function (cache) {
    3.      /* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
    4.      return cache.addAll([
    5.          './index.html'
    6.      ]);
    7.  })

    ); });

/ 注册fetch事件，拦截全站的请求 / this.addEventListener(‘fetch’, function(event) { event.respondWith( // magic goes here

  1.   /* 在缓存中匹配对应请求资源直接返回 */
  2. caches.match(event.request)

); });

```

注意事项

Service worker运行在worker上下文 —> 不能访问DOM
它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用
出于安全考量，Service workers只能由HTTPS承载
在Firefox浏览器的用户隐私模式，Service Worker不可用
其生命周期与页面无关（关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动）