Web Worker API 详解：核心概念、使用限制与实战应用场景

传统观点认为JavaScript是单线程语言，当页面执行长耗时同步任务时，会导致界面假死，严重影响用户体验，因此通常需要将任务放入任务队列中。虽然任务队列的执行并非多线程进行，但HTML5引入了Web Workers API，为前端开发提供了真正的多线程处理能力。本文将探讨Web Worker的定义、使用方法及其在生产环境中的实际应用。

1. 概述

Web Workers允许Web应用程序在独立于主执行线程的后台线程中运行脚本。其核心优势在于，可以在单独的线程中执行耗时操作，从而确保主线程（通常负责UI渲染）不会被阻塞，保持界面的响应性。

Web Worker的主要作用是为JavaScript创建多线程运行环境。主线程可以创建Worker线程并分配任务，两者并行运行且互不干扰。当Worker线程完成任务后，将结果返回给主线程。这种方式使得计算密集型或高延迟任务得以高效处理，主线程因此得以解放，避免被阻塞或拖慢。需要注意的是，这并不意味着JavaScript语言本身支持多线程，而是浏览器作为宿主环境提供了这种多线程运行机制。

Worker线程一旦创建，将持续运行，不受主线程活动的影响，这有利于随时响应主线程的通信请求。然而，这也可能导致资源浪费，因此应避免过度使用，并在任务完成后及时关闭Worker。具体而言，如果Worker没有实例引用，它将在空闲后立即关闭；如果存在非零的实例引用，即使空闲也不会被关闭。

接下来考察其浏览器兼容性情况。

2. 使用

2.1 限制

在使用Worker线程时，需注意以下几点限制：

• 同源限制：Worker线程执行的脚本文件必须与主线程脚本文件同源，这是出于安全考虑，防止Worker线程随意读取其他域名的文件。

• 文件限制：出于安全原因，Worker线程无法读取本地文件，其加载的脚本必须来自网络，且需与主线程脚本同源。

• DOM操作限制：Worker线程在与主线程不同的全局上下文中运行，无法读取主线程所在网页的DOM对象，也不能获取 document、 window等对象，但可以访问 navigator、 location(只读)、XMLHttpRequest、 setTimeout族等浏览器API。

• 通信限制：Worker线程与主线程不在同一上下文中，无法直接通信，必须通过 postMessage方法进行数据交换。

• 脚本限制：Worker线程不能执行 alert、 confirm，但可以使用 XMLHttpRequest 对象发起Ajax请求。

2.2 web worker例子

在主线程中生成Worker线程非常简单：

var myWorker = new Worker(jsUrl, options)

使用Worker()构造函数，第一个参数是脚本的网址（必须遵守同源策略），该参数为必填项，且仅能加载JS脚本，否则将报错。第二个参数是可选的配置对象，其主要作用是指定Worker的名称，用于区分多个Worker线程。

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });

// Worker 线程
self.name // myWorker

关于API的具体使用，通过以下示例即可理解。首先是Worker线程的JS文件内容：

// workerThread1.js
let i = 1

function simpleCount() {
    i++
    self.postMessage(i)
    setTimeout(simpleCount, 1000)
}

simpleCount()

self.onmessage = ev => {
    postMessage(ev.data + ' 呵呵~')
}

在HTML文件的body部分：

Worker 输出内容： id='app'>

type='text' title='' id='msg'>

onclick='sendMessage()'>发送

onclick='stopWorker()'>stop!

您可以运行上述代码查看效果，其中涉及了一些常用的API。

主线程中使用的API，其中 worker 表示Worker的实例：

• worker.postMessage：主线程向Worker线程发送消息，消息可以是任意类型的数据，包括二进制数据。

• worker.terminate：主线程用于关闭Worker线程。

• worker.onmessage：指定Worker线程发送消息时的回调函数，也可以通过 worker.addEventListener('message',cb) 的方式注册。

• worker.onerror：指定Worker线程发生错误时的回调函数，也可以通过 worker.addEventListener('error',cb) 的方式注册。

Worker线程中的全局对象为 self，代表子线程自身，此时 this 指向 self，其上提供了一些API：

• self.postMessage：Worker线程向主线程发送消息，消息可以是任意类型的数据，包括二进制数据。

• self.close：Worker线程用于关闭自身。

• self.onmessage：指定主线程向Worker线程发送消息时的回调函数，也可以通过 self.addEventListener('message',cb) 的方式注册。

• self.onerror：指定Worker线程发生错误时的回调函数，也可以通过 self.addEventListener('error',cb) 的方式注册。

需要注意的是，w.postMessage(aMessage,transferList) 方法接受两个参数，其中 aMessage 可以传递任何类型的数据，包括对象。这种通信是拷贝关系，即传值而非传址，Worker对通信内容的修改不会影响主线程。实际上，浏览器内部的运行机制是先将通信内容串行化，然后将串行化后的字符串发送给Worker，后者再将其还原。此外，还有一个可选的Transferable对象数组，用于传递所有权。如果一个对象的所有权被转移，在发送它的上下文中将变为不可用（中止），并且仅在被发送到Worker后可用。可转移对象包括ArrayBuffer、MessagePort或ImageBitmap的实例对象，transferList数组中不可传入null。

更详细的API参考请查阅MDN - WorkerGlobalScope文档。

Worker线程中加载脚本的API如下：

importScripts('script1.js') // 加载单个脚本

importScripts('script1.js', 'script2.js') // 加载多个脚本

3. 实战场景

个人认为，Web Worker可以被视为一种“计算器”，需要时取出使用，不使用时务必回收。

• 加密数据

  某些加解密算法较为复杂，或在处理大量数据时，会消耗大量计算资源，导致UI线程无响应。这是使用Web Worker的良好时机，通过Worker线程执行计算，可以让用户更无缝地操作UI。

• 预取数据

  有时为了提升数据加载速度，可以提前使用Worker线程获取数据，因为Worker线程可以使用 XMLHttpRequest。

• 预渲染

  在某些渲染场景下，例如渲染复杂的Canvas时，需要计算反射、折射、光影、材料等效果。这些计算逻辑可以使用Worker线程执行，也可以使用多个Worker线程。这里有一个射线追踪的示例可供参考。

• 复杂数据处理场景

  某些检索、排序、过滤或分析操作非常耗时，此时可以使用Web Worker进行处理，不占用主线程。

• 预加载图片

  有时页面包含大量图片或几个大尺寸图片，如果业务限制不考虑懒加载，也可以使用Web Worker来加载图片。可以参考相关探索文章，此处简要提要。

// 主线程
let w = new Worker("js/workers.js");
w.onmessage = function (event) {
    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(event.data);
    document.querySelector('#result').appendChild(img)
}

// worker线程
let arr = [...好多图片路径];
for (let i = 0, len = arr.length; i < len; i++) {
    let req = new XMLHttpRequest();
    req.open('GET', arr[i], true);
    req.responseType = "blob";
    req.setRequestHeader("client_type", "DESKTOP_WEB");
    req.onreadystatechange = () => {
        if (req.readyState == 4) {
            postMessage(req.response);
        }
    }
    req.send(null);
}

在Web Workers实战时请注意：

• 虽然使用Worker线程不会占用主线程，但启动Worker本身会耗费资源。

• 主线程中使用XMLHttpRequest在请求过程中，浏览器会另开一个异步HTTP请求线程，但交互过程中仍会消耗主线程资源。

以上就是JS多线程API Web Worker应用场景的详细内容，更多关于JS多线程Web Worker应用场景的资料请关注本站其它相关文章！