简化的高性能 JavaScript：Web Workers、SharedArrayBuffer 和 Atomics-js教程-PHP中文网

简化的高性能 JavaScript：Web Workers、SharedArrayBuffer 和 Atomics

霞舞

发布： 2024-12-20 22:12:28

原创

783人浏览过

简化的高性能 javascript：web workers、sharedarraybuffer 和 atomics

JavaScript 作为单线程语言，其任务在主线程上依次执行。虽然这种设计简化了开发流程，但也可能导致计算密集型任务成为性能瓶颈。本文将探讨如何利用 Web Workers、SharedArrayBuffer 和 Atomics 在 JavaScript 中实现多线程，从而构建高性能应用。

为何选择 Web Workers、SharedArrayBuffer 和 Atomics？

Web Workers

Web Workers 在后台线程中运行 JavaScript 代码，防止计算密集型任务阻塞用户交互（例如滚动或点击按钮）。

SharedArrayBuffer

SharedArrayBuffer 允许主线程和工作线程共享内存，无需数据复制，从而实现更快速的通信。

Atomics

Atomics 确保对共享内存的安全同步访问，防止竞争条件，并保持线程间数据一致性。

立即学习“Java免费学习笔记（深入）”；

示例：使用 Web Workers 和 SharedArrayBuffer 进行并行计算

以下是一个实际示例：并行计算大型数组的总和。

步骤一：创建 Web Worker 脚本

创建一个名为 worker.js 的文件，用于处理部分求和计算：

启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。

查看详情

<code class="javascript">// worker.js
self.onmessage = function(event) {
  const { array, start, end } = event.data;
  let sum = 0;
  for (let i = start; i < end; i++) {
    sum += array[i];
  }
  self.postMessage(sum);
};</code>

登录后复制

步骤二：配置主线程

在主脚本中，将任务分配给 Worker：

<code class="javascript">// main.js
const array = Array.from({ length: 1_000_000 }, () => Math.floor(Math.random() * 100));
const numWorkers = 4;
const chunkSize = Math.ceil(array.length / numWorkers);
const workers = [];
const results = [];
let completedWorkers = 0;

// 创建 SharedArrayBuffer 用于存储数组
const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * array.length);
const sharedArray = new Int32Array(sharedBuffer);
sharedArray.set(array);

// 初始化 Worker
for (let i = 0; i < numWorkers; i++) {
  const worker = new Worker('worker.js');
  workers.push(worker);
  worker.onmessage = function(e) {
    results.push(e.data);
    completedWorkers++;
    if (completedWorkers === numWorkers) {
      let totalSum = results.reduce((acc, curr) => acc + curr, 0);
      console.log('总和：', totalSum);
    }
  };
  worker.postMessage({ array: sharedArray, start: i * chunkSize, end: (i + 1) * chunkSize });
}</code>

登录后复制

步骤三：使用 Atomics 进行同步 (可选，如果需要更精细的同步控制)

使用 Atomics 管理进度或确保所有线程在继续之前都已完成。

<code class="javascript">const progress = new Int32Array(sharedBuffer);
Atomics.add(progress, 0, 1); // 增加进度

if (Atomics.load(progress, 0) === numWorkers) {
    console.log('所有 Worker 完成任务。');
}</code>

登录后复制