Web Worker

web worker的理解和使用，Web Worker 是HTML5提供并规范的一套API，它为JavaScript创造了一个多线程的运行环境。

Web Worker

• Web Worker的诞生
  • 众所周知，js最初设计是运行在浏览器中的
  • 为了防止多个线程同时操作DOM，带来渲染冲突问题，所以js执行器被设计成单线程
  • 随着前端技术的发展，当遇到需要大量计算的场景时，js线程往往会被长时间阻塞，甚至造成页面卡顿，影响用户体验
• 了解 Web Worker
  • 什么是 Web Worker？
    • Web Worker 是 HTML5 标准的一部分
    • 定义了一套 API，允许我们在 js 主线程之外开辟新的 Worker 线程，并将一段 js 脚本运行其中
    • 赋予了开发者利用 js 操作多线程的能力
    • 即使脚本执行了很长时间，Web 应用程序的 UI 仍然可以保持响应
  • Web Worker 的优点
    • 提高页面性能：在后台线程中执行一些计算密集型或者耗时的操作，如数据处理、图像处理等，而不会占用主线程，从而避免了页面卡顿或者卡死的情况，提高了页面的性能和响应速度。
    • 处理大规模数据：可以处理大规模的数据，因为它们在单独的线程中运行，不会影响主线程的运行，可以更高效地处理大规模的数据，提高了代码的效率和可扩展性。
    • 使代码更加模块化：可以将代码分割成多个模块，分别运行在不同的线程中，从而使得代码更加模块化，可维护性和可读性更强。
    • 支持多线程：支持多线程，因此可以利用多核处理器的优势，提高代码的运行效率。
  • Web Worker的使用场景
    • 图像处理：如旋转、裁剪、缩放、滤镜等。这可以提高图像处理的性能和响应速度。
    • 数据处理：如数据集的过滤、排序、归纳、转换等。这可以提高数据处理的效率和准确性。
    • 计算密集型任务：如模拟、优化、预测、统计等。这可以提高计算任务的速度和精度。
    • 实时通信：如聊天室、游戏、视频会议等。这可以提高实时通信的稳定性和性能。
    • 离线缓存：可以将常用的资源预先下载到客户端本地缓存中，并在无法访问互联网时使用缓存中的资源。这可以提高应用程序的可用性和响应速度，尤其是在移动设备上。
    • 多线程处理：如并行计算、任务分发、负载均衡等。这可以提高系统的并发性和可伸缩性。
• Web Worker 使用
  • 创建 Worker： 只需要通过 new 调用 Worker() 构造函数即可，它接收两个参数：const worker = new Worker(path, options);
  • js 主线程与 worker 线程数据传递：主线程与 worker 线程都是通过 postMessage 方法来发送消息，以及监听 message 事件来接收消息
    • 主线程与 worker 线程之间的数据传递是传值而不是传地址。因此即使传递的是一个Object，并且被直接传递回来，接收到的也不是原来的那个值了。
  • 监听错误信息：web worker 提供两个事件监听错误
    • error：当worker内部出现错误时触发
    • messageerror：当 message 事件接收到无法被反序列化的参数时触发
  • 关闭Worker线程：worker 线程的关闭在主线程和 worker 线程都能进行操作，但对 worker 线程的影响略有不同
    • 相同点：无论是在主线程关闭 worker，还是在 worker 线程内部关闭 worker，worker 线程当前的 Event Loop 中的任务会继续执行
    • 不同点：在主线程手动关闭 worker，主线程与 worker 线程之间的连接都会被立刻停止，即使 worker 线程当前的 Event Loop 中仍有待执行的任务继续调用 postMessage() 方法，但主线程不会再接收到消息。 在 worker 线程内部关闭 worker，不会直接断开与主线程的连接，而是等 worker 线程当前的 Event Loop 所有任务执行完，再关闭。也就是说，在当前 Event Loop 中继续调用 postMessage() 方法，主线程还是能通过监听message事件收到消息的。
  • Worker 线程引用其他js文件
    • web worker在 worker 线程中提供了 importScripts() 方法加载我们需要的js文件，而且，通过此方法加载的js文件不受同源策略约束
    • ESModule 模式：js 文件为 ESModule 模式时，importScripts() 导入文件会失败，此时需要用const worker = new Worker('/worker.js', {type: 'module'})指定文件类型，然后就能用import方式引入了
  • 主线程和 worker 线程可传递哪些类型数据
    • Error和Function对象以及Dom节点无法传递
• SharedWorker
  • 是一种特殊类型的 Worker，可以被多个浏览上下文访问，比如多个 windows，iframes 和 workers，但这些浏览上下文必须同源
  • 实现于一个不同于普通 worker 的接口，具有不同的全局作用域：SharedWorkerGlobalScope ，但是继承自WorkerGlobalScope
  • 与worker的区别：主线程与 SharedWorker 线程是通过MessagePort建立起链接，数据通讯方法都挂载在SharedWorker.port上，如果采用 addEventListener 来接收 message 事件，那么在主线程初始化SharedWorker() 后，还要调用 SharedWorker.port.start() 方法来手动开启端口，但是如果采用 onmessage 方法，则默认开启端口，不需要再手动调用SharedWorker.port.start()方法
  • 注意：在 sharedWorker 线程里使用 console 打印信息，不会出现在主线程的的控制台中
    • 调试 sharedWorker，需要在 Chrome 浏览器输入 chrome://inspect/ ，这里能看到所有正在运行的 sharedWorker，然后开启一个独立的 dev-tool 面板
• 兼容性
  • • web workers 已经被大多数浏览器支持，使用上基本不用考虑兼容问题
  • • sharedWorker 在 Safari 以及移动端的兼容性不是很好，使用时还需注意