浏览器中的 Workers 都有哪些？

Question

浏览器中的 Workers 都有哪些？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

Web Workers

• Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法，线程可以执行任务而不干扰用户界面，其具体又分为 专用 worker、共享 worker（new SharedWorker）

  • 专用 worker，一个【专用 worker】仅仅能被生成它的脚本所使用， const worker = new Worker("xxx.js")
  • 共享 worker（new SharedWorker），一个【共享 worker】可以被多个脚本使用，即使这些脚本正在被不同的 window、iframe 或者 worker 访问，const worker = new SharedWorker("xxx.js")
• Worker 线程能够访问一个全局函数 importScripts() 来引入脚本，该函数接受【0 个或 多个 URI】作为参数来引入资源， 脚本的下载顺序不固定，但执行时会按照传入 importScripts() 中的文件名顺序进行，这个过程是【同步完成】的，直到所有脚本都下载并运行完毕，importScripts() 才会返回
• 通过 postMessage(data) 发送消息，通过 onMessage = function(){} 接收消息
• 【主线程】中通过 myWorker.terminate() 立即杀死 worker 线程，不会有任何机会让它完成 自己的操作 或 清理工作；【worker 线程】中通过 close() 关闭线程
• 当 worker 出现运行中错误时，它的 onerror 事件处理函数会被调用

Service Workers

• Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现【离线缓存】、【请求拦截】、【消息推送】等功能， Service Worker 中涉及到【请求拦截】，所以必须使用 HTTPS 协议来保障安全、

• 核心步骤

  • 首先需要先注册 Service Worker
  • 监听 install 事件，缓存需要的文件
  • 在下次用户访问的时就可以通过【拦截请求】的方式，查询是否存在缓存，若存在就直接读取缓存文件，否则就去请求数据

// serviceWorker.js

if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function(registration) {
      console.log('service worker 注册成功')
    })
    .catch(function(err) {
      console.log('servcie worker 注册失败')
    })
}

// sw.js

// 监听 install 事件
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open("my-cache").then(function (cache) {
      return cache.addAll(["./index.html"]);
    })
  );
});

// 拦截所有请求事件
self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then(function (response) {
      // 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
      if (response) {
        return response;
      }
      console.log("fetch source");
    })
  );
});

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。