Web Workers:在后台线程执行指定脚本

使用Web Worker可以在后台线程中运行 JavaScript,线程可以执行任务而不会干扰用户界面。

使用规则

  • worker是使用Worker()构造出的实例对象,在后台线程中运行一个命名的 JavaScript 脚本。
  • worker实例对象可以通过将信息发送到创建它的 JavaScript 代码。
  • worker运行在另一个全局上下文中,而非window对象。
  • worker中不能直接操作 DOM 节点,也不能使用window对象的默认方法和属性。
  • worker和主线程之间,通过postMessage()方法发送各自的数据,使用onmessage事件处理函数来响应数据,数据在message事件的data属性中。
  • worker和主线程之间传递的数据是另外复制的数据。
  • 主线程可以使用实例对象上的terminate()方法立刻终止该worker
  • worker线程内部可以使用close()关闭自身。
  • worker的一个优势在于能够执行处理器密集型的运算而不会阻塞 UI 线程。

应用举例

如下代码所示,在主线程中首先进行了兼容性检验,创建了一个由worker.js执行的Worker。通过myWorker.postMessage()发送消息。通过myWorker.onmessage响应Worker返回的消息。

const a = 1;
const b = 2;

if (window.Worker) {
  const myWorker = new Worker('./worker.js');
  myWorker.postMessage({ a, b });

  myWorker.onmessage = e => {
    console.log('收到worker的信息...');
    console.log(e.data);
  };
}

Worker中,通过onmessage响应主线程发送的消息,经过一些处理后,通过postMessage返回消息到主线程。

// worker.js
onmessage = e => {
  console.log('收到主线程的信息...');
  const { a, b } = e.data;
  const sum = a + b;
  postMessage(sum);
};

从这里我们可以看到,主线程中,onmessagepostMessage()必须挂在worker对象上。而在worker内部,不必这样做,因为worker有自己的作用域。

如下代码所示,在workeronmessage中打印this

onmessage = e => {
  console.log(this);
};

image-20220411142557425

终止 worker

在上述代码中,若在主线程中调用myWorker.terminate(),则不会收到任何消息,因为worker线程刚创建完毕就被终止。

const a = 1;
const b = 2;

if (window.Worker) {
  const myWorker = new Worker('./worker.js');
  myWorker.postMessage({ a, b });
  // 终止myWorker
  myWorker.terminate();

  myWorker.onmessage = e => {
    console.log('收到worker的信息...');
    console.log(e.data);
  };
}

同样,在worker线程中调用close(),主线程也不会有任何响应,因为线程刚启动就被关闭。

close();

onmessage = e => {
  console.log('收到主线程的信息...');
  const { a, b } = e.data;
  const sum = a + b;
  postMessage(sum);
};

共享 worker

主线程:

const a = 1;
const b = 2;

if (window.Worker) {
  const myWorker = new SharedWorker('./worker.js');
  myWorker.port.postMessage({ a, b });

  myWorker.port.onmessage = e => {
    console.log('收到worker的信息...');
    console.log(e.data);
  };
}

worker线程:

onconnect = e => {
  const port = e.ports[0];

  port.onmessage = e => {
    const { a, b } = e.data;
    const sum = a + b;
    port.postMessage(sum);
  };
};

参考:

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在Vue.js中,JavaScript是单线执行的,这意味着它不能直接支持多线程。然而,你可以使用Web Workers来模拟多线程的行为,以处理一些耗时的任务。 Web Workers是在后台运行的JavaScript脚本,它们可以在独立的线程中执行,而不会阻塞主线程。Vue.js中的组件可以与Web Workers进行通信,将一些计算密集型的任务交给它们来处理,从而提高应用程序的性能和响应性。 要在Vue.js中使用Web Workers,你可以按照以下步骤操作: 1. 创建一个Worker实例:在Vue组件中使用`new Worker('worker.js')`来创建一个Web Worker实例。其中,'worker.js'是你要执行脚本文件。 2. 监听消息:通过`worker.onmessage`事件监听来自Worker的消息。 3. 发送消息:通过`worker.postMessage()`方法向Worker发送消息。 4. 在Worker脚本中处理消息:在Worker脚本中使用`self.onmessage`事件监听来自主线程的消息,并通过`self.postMessage()`方法向主线程发送消息。 通过这种方式,你可以将一些耗时的计算任务放到Worker中执行,而不会阻塞主线程。然后,当Worker完成任务并返回结果时,你可以在主线程中更新Vue组件的状态或执行其他操作。 需要注意的是,由于Web Workers在独立的线程中运行,它们无法直接访问DOM或Vue实例。如果需要更新Vue组件的状态,你需要通过发送消息和监听消息的方式来实现。 希望这些信息能够帮助你在Vue.js中模拟多线程的行为。如果你需要更详细的示例或代码,可以提供更具体的需求,我会尽力帮助你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

火星飞鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值