JavaScript 线程

2025 年 4 月 18 日 | 阅读 9 分钟

JavaScript 是一种灵活的编程语言，常用于 Web 开发，以创建交互式和动态的网页。它的一个基本特性是，由于其单线程特性，它在一个调用堆栈中一次只能处理一项操作。这种简单性可以避免多线程编程中常见的某些复杂性，但由于应用程序需要大量计算或许多并发任务，也可能导致性能瓶颈。Web 应用程序日益增长的复杂性和资源需求使得并发执行变得至关重要。线程，特别是通过使用 Web Workers，可以使 JavaScript 更高效地处理这些任务，从而提高性能和用户满意度。

JavaScript 的单线程模型

JavaScript 遵循单线程方法，通过单个调用堆栈顺序处理任务。这种设计使语言更简单，便于编写代码、调试和维护。尽管如此，这也意味着耗时的任务会阻碍其他代码的执行，从而可能导致效率问题。

主事件循环在 JavaScript 的并发模型中起着至关重要的作用。它持续监控调用堆栈和消息队列。当调用堆栈中没有待执行的函数时，事件循环会从队列中检索下一个消息，并将其对应的回调添加到调用堆栈中以供执行。此功能使 JavaScript 能够管理独立发生的任务，例如用户输入、网络请求和计时事件，而不会中断主执行过程。

尽管单线程模型有效，但它确实存在局限性。复杂的计算或数据处理由于耗时过长，可能会使主线程变得无响应。这可能导致负面的用户体验，浏览器似乎无响应或缓慢。为了解决这些问题，开发人员通常会利用回调、Promises 和 async/await 等异步编程方法来保持应用程序的响应能力。尽管如此，这些技术仍在单线程模型的限制内运行，并且无法充分利用当前多核处理器的功能。

为了克服这些限制，JavaScript 提供了 Web Workers 等功能，可以通过将任务移到后台运行的独立线程来实现真正的并行。这有助于在执行密集型计算的同时保持主线程的响应能力。

JavaScript 中的并发

JavaScript 中的并发意味着该语言通过交错执行来同时管理多个任务的能力。这与并行不同，并行通常在 CPU 的多个核心上同时执行活动。尽管 JavaScript 本质上是单线程的，无法在同一线程内执行并行任务，但它仍然可以通过使用异步编程来实现并发。

JavaScript 中的异步编程允许在启动任务后，在初始任务完成之前继续执行其他任务。这对于需要等待的网络请求或文件 I/O 等活动至关重要，可确保应用程序保持可用。

回调是 JavaScript 中用于管理异步任务的早期技术之一。回调函数作为参数传递给另一个函数，并在异步任务完成后被触发。尽管有用，但回调可能会导致复杂的嵌套结构，称为“回调地狱”，这会给代码的可读性和可维护性带来困难。

为了解决这些问题，JavaScript 引入了 Promises。Promise 是一个现在、将来或永远可以访问的值。Promises 通过允许使用 then() 和 catch() 方法链接操作，提供了一种更结构化的管理异步任务的方法。这有助于避免回调过度嵌套，并提高代码的可读性。

在先前的 Promise 的基础上，JavaScript 通过添加 async/await 语法使异步代码更加简单。async 关键字允许函数返回一个 Promise，而 await 则延迟函数的执行直到 Promise 被解析。这使得异步代码看起来像同步代码，使其编写和理解起来更加容易。

示例

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}   

通过使用 async/await，开发人员可以编写更易于理解且不易出错的异步代码，最终改进 JavaScript 应用程序中并发的管理。

Web Workers

JavaScript 中的 Web Workers 允许脚本在独立于主执行线程的单独线程中运行。它们的主要目标是执行计算量大的任务，而不会导致用户界面延迟，从而提供更流畅、更快的用户体验。

Web Workers 使 JavaScript 能够执行多线程。通过将任务委托给后台线程，Web Workers 可以与主线程同时管理繁重的计算或大量数据处理任务，使主线程能够专注于管理用户交互和 UI 更新。这可以防止长时间运行的操作导致主线程冻结，并显著提高复杂 Web 应用程序的性能。

创建和使用 Web Worker 非常简单。以下是一个基本示例

1. 创建一个 Web Worker 脚本 (worker.js)

// worker.js
onmessage = function(event) {
  const result = event.data * 2;
  postMessage(result);
};   

2. 在主脚本中创建并与 Web Worker 交互

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log('Result from worker:', event.data);
};
worker.postMessage(10); // Send data to the worker   

在此示例中，主脚本从 `worker.js` 创建一个 worker，并通过 `postMessage` 将数据发送给它。worker 脚本处理数据并将结果返回给主线程，然后在此处进行记录。

尽管 Web Workers 提供了优势，但仍存在限制和需要考虑的因素

无 DOM 访问： Web Workers 无法访问或修改 DOM。它们在独立的环境中运行，需要向主线程发送消息进行通信。
开销： 创建和管理 worker 会产生开销。如果任务很短或很小，其优势可能不值得跨线程通信的成本。
复杂性增加： 与处理单线程代码相比，在多线程环境中进行调试和管理代码可能更具挑战性。

共享内存和 Atomics

JavaScript 中的共享内存允许多个线程同时访问和修改数据，从而提高通信和数据处理效率。此功能对于需要共享状态的任务（如模拟或实时数据分析）尤其有利。JavaScript 利用 `SharedArrayBuffer` 和 `Atomics` API 来实现共享内存。

`SharedArrayBuffer` 是一种特殊的缓冲区，可以与主线程和 Web Workers 共享。它允许这些线程访问和修改相同的内存位置，这对于需要高效数据共享的情况至关重要。然而，同时使用共享内存可能会导致竞态条件，即结果取决于线程的执行顺序。

为了解决这个问题，`Atomics` API 提供了共享内存的原子操作。原子操作确保在其他线程的干扰下，对共享数据的读-改-写序列能够不中断地完成，从而避免竞态条件。这确保了数据的一致性，并保证了线程的安全。

示例

1. 主线程

// Create a SharedArrayBuffer
const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Uint8Array(sharedBuffer);
// Initialize a Web Worker
const worker = new Worker('worker.js');
worker.postMessage(sharedBuffer);
// Perform an atomic operation
Atomics.store(sharedArray, 0, 123);   

2. Worker 线程 (worker.js)

onmessage = function(event) {
  const sharedArray = new Uint8Array(event.data);
  // Perform an atomic operation
  const value = Atomics.load(sharedArray, 0);
  console.log('Value from shared array:', value);
  // Modify the shared array
  Atomics.add(sharedArray, 0, 1);
};   

在此示例中，主线程启动一个 `SharedArrayBuffer` 并设置一个 Web Worker，将其提供给 worker。主线程和 worker 都可以通过利用 `Atomics` API 提供的原子操作来安全地访问共享缓冲区。这确保了数据完整性，并保证了跨不同线程的更新一致性，突显了共享内存的有效性。

实际用例

利用 JavaScript 线程可以为涉及大量计算或实时处理的任务带来优势。它可以防止主线程出现潜在的瓶颈，并保持积极的用户体验。典型场景包括图像处理、数据分析以及游戏或协作编辑等即时任务。

图像处理

对图像执行任务，例如应用滤镜或对其进行修改，需要大量的计算能力，并可能导致主线程运行缓慢。通过将这些任务委托给 Web Workers，主线程保持活动状态，从而改善用户体验。

示例：应用灰度滤镜

1. 主线程

// Initialize a Web Worker
const worker = new Worker('worker.js');
// Handle the message from the worker
worker.onmessage = function(event) {
  const processedImageData = event.data;
  displayImage(processedImageData); // Function to update the image on the UI
};
// Send image data to the worker
const imageData = getImageData(); // Function to get image data
worker.postMessage(imageData);   

2. Worker 线程 (worker.js)；

onmessage = function(event) {
  const imageData = event.data;
  const data = imageData.data;
  // Apply grayscale filter
  for (let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = data[i + 1] = data[i + 2] = avg;
  }
  postMessage(imageData);
};   

数据分析

在数据分析领域，对大型数据集进行排序或执行复杂计算等任务可以委托给 Web Workers。这可以确保主应用程序在后台处理大量数据时保持响应。

实时应用

实时功能，如在线游戏或共享编辑程序，可以通过使用线程来管理各种并发任务，同时防止 UI 变得无响应。一个例子可能是一个游戏，它使用 Web Workers 来处理物理计算，尽管存在复杂的交互，但仍能确保流畅的游戏体验。

在这些情况下，JavaScript 线程有助于更有效地处理计算量大的任务，使主线程能够专注于用户交互，并提高性能和响应能力。

性能考虑

通过使资源密集型任务能够单独处理，线程可以显著提升 JavaScript 应用程序的功能，从而使主线程保持不受负担且响应迅速。然而，权衡优势与开发和管理这些线程所需的工作量也很重要。

线程对效率的影响

线程可以提高应用程序的响应能力和性能，尤其是在图像处理、数据处理和实时更新等任务中。通过将这些职责分配给 Web Workers，主线程仍然可以有效地管理用户输入，从而改善用户体验。

线程管理和控制管理任务

尽管线程可以提高效率，但它们也会带来开销。启动新线程（或 Web Worker）会消耗内存和处理能力。主线程和 worker 之间来回发送消息需要传递消息，这可能会由于数据序列化和反序列化过程而导致延迟。这些额外的资源消耗可能会抵消线程的优势，尤其对于不值得开销的小型或短期任务而言。

最大化线程利用率的建议

找出瓶颈： 使用分析工具来识别应用程序中通过使用线程可以获得最大改进的特定区域。只专注于委托对性能有重大影响的任务。
批处理： 这种方法涉及将较小的任务组合在一个线程中，以降低处理多个线程的负担。它优化了资源利用率并减少了不必要的通信。
限制线程数量： 避免创建过多的线程。过多的线程会导致高上下文切换开销和资源争用。理想情况下，应将线程数量与可用 CPU 核心数相匹配。
有效通信： 减少主线程和 worker 之间共享的数据量和频率。尽可能使用共享内存（如 `SharedArrayBuffer`），以避免与消息传递相关的开销。

结论

深入理解 JavaScript 中的线程对于提高性能和确保 Web 应用程序的无缝用户体验至关重要。通过利用 Web Workers 和共享内存等工具，开发人员可以将图像处理或数据分析等资源密集型操作转移到单独的线程，从而避免主线程被阻塞。这种并行性可以实现更快的应用程序，并为开发动态高效的 Web 界面提供了机会。随着 JavaScript 的不断发展，理解线程概念对于保持竞争力并提供高质量的 Web 解决方案至关重要。

下一主题Leetcode JavaScript 问题

JavaScript 线程

JavaScript 的单线程模型

JavaScript 中的并发

示例

Web Workers

1. 创建一个 Web Worker 脚本 (worker.js)

2. 在主脚本中创建并与 Web Worker 交互

共享内存和 Atomics

示例

1. 主线程

2. Worker 线程 (worker.js)

实际用例

图像处理

示例：应用灰度滤镜

1. 主线程

2. Worker 线程 (worker.js)；

数据分析

实时应用

性能考虑

线程对效率的影响

线程管理和控制管理任务

最大化线程利用率的建议

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 线程

JavaScript 的单线程模型

JavaScript 中的并发

示例

Web Workers

1. 创建一个 Web Worker 脚本 (worker.js)

2. 在主脚本中创建并与 Web Worker 交互

共享内存和 Atomics

示例

1. 主线程

2. Worker 线程 (worker.js)

实际用例

图像处理

示例：应用灰度滤镜

1. 主线程

2. Worker 线程 (worker.js)；

数据分析

实时应用

性能考虑