跳到主要内容

认识

2024年02月07日
柏拉文
越努力，越幸运

一、认识​

Worker 提供了在浏览器后台执行脚本的能力，而不会影响到主线程的性能，这样可以在浏览器中实现多线程的工作模式。Worker 线程和主线程之间不共享作用域或任何全局数据，不能直接访问DOM结构, 它们只能通过消息传递(postMessage方法和onmessage事件)进行通讯。

二、语法​

const worker = new Worker(aURL, options);

  • aURL: 是一个 DOMString 表示 worker 将执行的脚本的 URL。它必须遵守同源策略。

  • options: 包含可在创建对象实例时设置的选项属性的对象。可用属性如下:

    • type: 用以指定 worker 类型的 DOMString 值。该值可以是 classic 或 module. 如果未指定，将使用默认值 classic.

    • credentials: 用以指定 worker 凭证的 DOMString 值。该值可以是 omit, same-origin，或 include。如果未指定，或者 type 是 classic，将使用默认值 omit (不要求凭证)。

    • name: 在 DedicatedWorkerGlobalScope 的情况下，用来表示 worker 的 scope 的一个 DOMString 值，主要用于调试目的。

三、场景​

3.1 复杂计算​

index.html
<script>
    const worker = new Worker('./worker.js');

    worker.addEventListener('message', e => {
        const { data } = e;
        console.log('Message from worker: ', data);
    });

    worker.postMessage([1, 2, 3, 4, 5]);
</script>
worker.js
function calculate(data) {
  return data.reduce((prev, curr) => prev + curr, 0);
}

self.addEventListener('message', e => {
  const { data } = e;
  const result = calculate(data);
  self.postMessage(result);
});