记Web Worker

晚风予星
348 阅读4分钟

1、什么是 Web Worker？

Web Worker 是一种浏览器提供的 JavaScript API，它允许在后台线程中运行脚本，而不会阻塞主线程。这意味着，即使脚本执行了很长时间，Web 应用程序的 UI 仍然可以保持响应。

Web Worker 有两种类型：Dedicated Worker 和 Shared Worker。

  • Dedicated Worker 是指与一个页面绑定的 Worker，它仅能由该页面的脚本使用。
  • Shared Worker 则可以被多个页面共享使用，这使得多个页面可以同时访问同一个后台线程。

2、在Vue中使用Worker报错

const worker = new Worker('./file.worker.js', {
     type: 'module'
  });
  • 最近在看大文件分片，而且使用了Vue的框架，在使用Worker的情况下一直报以下错误

image.png

  • 这个错误提示的意思是，网页中使用了模块脚本（module script），但服务器返回的 MIME 类型是 “text/html”，而不是 JavaScript 类型。根据 HTML 规范，严格的 MIME 类型检查会对模块脚本进行强制执行。

  • 要解决这个问题，可以采取以下步骤：

  1. 检查服务器配置：确保您的服务器正确配置以提供 JavaScript 文件的 MIME 类型。对于 .js 文件，通常 MIME 类型应该是 application/javascript 或 application/ecmascript。您可以查看您的服务器配置文件或与服务器管理员联系以确保正确配置。
  2. 检查文件扩展名：确保您的 Web Worker 脚本文件具有 .js 扩展名。这有助于服务器正确识别文件类型。
  3. 使用绝对或相对路径：确保在 new Worker 中提供的脚本路径是正确的，并且相对于服务器的根目录。这将有助于确保浏览器能够正确加载脚本。
  4. 检查服务器响应：使用浏览器开发者工具查看网络请求，确保服务器返回的响应确实是您期望的 JavaScript 文件，而不是 HTML 文件。
  5. 清除浏览器缓存：有时浏览器可能会缓存不正确的 MIME 类型信息。尝试清除浏览器缓存并重新加载页面，以查看是否解决了问题。
  6. 检查文件路径：确保 Web Worker 脚本的路径是正确的，不包含拼写错误或不存在的文件。
  • 可惜以上问题都排查过一遍了，还是没有解决这个报错，那就可能在Vue中，Worker的使用方法不正确导致的

3、Vue2中如何使用Web Worker

  • 安装worker-loader这个loader
npm i -D worker-loader
  • 在vue.config.js中配置
chainWebpack(config) {
    config.module
      .rule('worker')
      .test(/\.worker\.js$/) // 文件名需要xxx.worker.js
      .use('worker-loader')
      .loader('worker-loader')
      .end();
    config.module.rule('js').exclude.add(/\.worker\.js$/);
  }
  • 配置完成之后就可正常使用Web Worker
import FileWorker from './file.worker';

const worker = new FileWorker();
  • 正常执行worker中的逻辑:

image.png

4、Worker实例方法

  • postMessage：给线程发送消息 
worker.postMessage(message);
worker.postMessage(message, transfer)
  • onmessage：接收线程消息
    • 传递的数据在event.data中，当然event中也有其他的字段，详情可查看MDN

image.png

addEventListener("message", (event) => {});

onmessage = (event) => {};
  • terminate：结束线程
    • 本方法并不会等待 worker 去完成它剩余的操作；worker 将会被立刻停止。
worker.terminate()

5、Worker的使用场景

Web Worker 可以在很多场景下使用，特别是在需要处理大量数据或计算密集型任务时。以下是一些 Web Worker 的使用场景：

  • 图像处理：可以用于处理图像操作，如旋转、裁剪、缩放、滤镜等。这可以提高图像处理的性能和响应速度。

  • 数据处理：可以用于处理大量数据，如数据集的过滤、排序、归纳、转换等。这可以提高数据处理的效率和准确性。

  • 计算密集型任务：可以用于处理计算密集型任务，如模拟、优化、预测、统计等。这可以提高计算任务的速度和精度。

  • 实时通信：可以用于实现实时通信，如聊天室、游戏、视频会议等。这可以提高实时通信的稳定性和性能。

  • 离线缓存：可以用于离线缓存，可以将常用的资源预先下载到客户端本地缓存中，并在无法访问互联网时使用缓存中的资源。这可以提高应用程序的可用性和响应速度，尤其是在移动设备上。

  • 多线程处理：可以用于实现多线程处理，如并行计算、任务分发、负载均衡等。这可以提高系统的并发性和可伸缩性。

总之，Web Worker 可以用于任何需要在后台执行长时间运行的任务，以避免阻塞 UI 线程和提高应用程序的性能和响应速度。

avatar
文章
阅读
粉丝