WebAssembly (WASM) for High Performance Apps · 课时

使用 WASM 线程的 Web Workers

集成 Web Workers，在独立线程中运行 WASM 模块，避免阻塞用户界面并提升响应能力

第 1 / 4 课11 个步骤

使用 WASM 线程的 Web Workers 是 CoddyKit 上的免费 WebAssembly (WASM) for High Performance Apps 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 WebAssembly (WASM) for High Performance Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 WebAssembly (WASM) for High Performance Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Preventing UI Freezes

Web applications often need to perform complex tasks, like heavy calculations or data processing. If these tasks run directly on the main browser thread, they can cause the user interface (UI) to freeze and become unresponsive.

This leads to a poor user experience. To avoid this, we need ways to run code concurrently, or in parallel, without blocking the UI.

Meet Web Workers

Web Workers are a JavaScript feature that allows scripts to run in the background, separate from the main execution thread of a web page.

They have their own global scope.
They cannot directly access the Document Object Model (DOM).
They communicate with the main thread using messages.

This isolation is key to keeping your UI responsive.

WASM on the Main Thread

By default, when you load and execute a WebAssembly (WASM) module in a web page, it runs on the main JavaScript thread, just like regular JavaScript code.

If your WASM module performs a very long or computationally intensive operation, it will block the main thread. This means the browser won't be able to update the UI, respond to user input, or run other scripts until the WASM task is complete.

WASM + Workers = Power

Combining Web Workers with WebAssembly offers a powerful solution for high-performance web applications. You can:

Run CPU-intensive WASM computations (like image processing, video encoding, or complex simulations) in a separate thread.
Keep the main thread free and responsive for UI updates and user interactions.
Leverage the near-native speed of WASM without sacrificing user experience.

Spawning a Web Worker

You create a Web Worker by instantiating the Worker object with the URL of a script file. This script will then run in its own thread.

The main script can then send messages to this worker, and the worker can send messages back.

const workerCode = `
  self.onmessage = (e) => {
    console.log('Worker received:', e.data);
    self.postMessage('Worker says hello!');
  };
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = (event) => {
  console.log('Main received:', event.data);
};

worker.postMessage('Hello from main!');
console.log('Main thread finished setup.');

Loading WASM in a Worker

Loading a WASM module inside a Web Worker is similar to loading it on the main thread. You fetch the .wasm file and instantiate it using WebAssembly.instantiate within the worker's script.

Once instantiated, you can call its exported functions to perform your heavy computations.

// worker.js
self.onmessage = async (e) => {
  // Fetch the WASM module
  const response = await fetch('my_wasm_module.wasm');
  const bytes = await response.arrayBuffer();
  
  // Instantiate the WASM module
  const { instance } = await WebAssembly.instantiate(bytes, {});
  
  // Call an exported WASM function
  const result = instance.exports.processData(e.data);
  
  // Send result back to the main thread
  self.postMessage(result);
};

Communicating with Workers

Communication between the main thread and a Web Worker happens via messages using the postMessage() method and the onmessage event handler.

Data passed between threads is copied, not shared, which means complex objects are serialized and deserialized. This ensures thread safety.

const workerCode = `
  self.onmessage = (e) => {
    console.log('Worker got:', e.data);
    self.postMessage('Processing ' + e.data);
  };
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = (event) => {
  console.log('Main got:', event.data);
};

worker.postMessage('a large dataset');
worker.postMessage('another task');
console.log('Main thread sent messages.');

Offloading Heavy Calculations

This example demonstrates how to offload a simulated heavy calculation to a Web Worker. The main thread sends a number, the worker performs a Fibonacci-like calculation, and the main thread continues its work without interruption.

Imagine the worker's heavyCalculation function is actually your WASM module's high-performance function.

const workerCode = `
  self.onmessage = (e) => {
    console.log('Worker: Starting heavy calculation...');
    const num = e.data;
    let a = 0, b = 1, next;
    for (let i = 0; i < num; i++) {
        next = a + b;
        a = b;
        b = next;
    }
    console.log('Worker: Calculation finished.');
    self.postMessage(a);
  };
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = (event) => {
  console.log('Main: Received result:', event.data);
};

worker.postMessage(40); // Send number to worker
console.log('Main: Sent request. UI remains responsive!');

// Simulate other UI work on the main thread
let counter = 0;
const intervalId = setInterval(() => {
  console.log('Main: UI update simulation ' + counter++);
  if (counter > 3) clearInterval(intervalId);
}, 100);

Key Advantages

Using Web Workers with WASM modules brings several significant benefits to your web applications:

Improved UI Responsiveness: The main thread stays free, preventing freezes.
Better Performance: Combine WASM's speed with parallel execution.
Enhanced User Experience: Users experience fluid interactions even during intensive tasks.
Efficient Resource Utilization: Leverage multi-core CPUs by distributing workload.

Check Your Understanding

Consider a web application that needs to perform complex image filtering. This process takes several seconds to complete.

Which approach would best ensure the user interface remains responsive?

在交互式课程中回答

Summary & Next Steps

We've learned how Web Workers provide a separate thread for executing scripts, preventing UI blocking. By loading and running your high-performance WASM modules inside these workers, you can achieve smooth, responsive web applications even with heavy computations.

This combination is powerful for tasks like image processing, data analysis, and complex simulations. In the next lessons, we'll explore more advanced concurrency patterns, including shared memory for even tighter integration.

免费开始

用 AI 导师学习 WebAssembly (WASM) for High Performance Apps — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 12
课程: 48

免费开始学习查看完整课程

常见问题解答

「使用 WASM 线程的 Web Workers」课时是免费的吗？

是的 — 「使用 WASM 线程的 Web Workers」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 WebAssembly (WASM) for High Performance Apps 课程的其余内容，请升级到 CoddyKit PRO。 WebAssembly (WASM) for High Performance Apps 课程共包含 4 节课。

「使用 WASM 线程的 Web Workers」这节课中我会学到什么？

集成 Web Workers，在独立线程中运行 WASM 模块，避免阻塞用户界面并提升响应能力你通过在浏览器中直接运行的动手代码来练习 WebAssembly (WASM) for High Performance Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 WebAssembly (WASM) for High Performance Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 WebAssembly (WASM) for High Performance Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「使用 WASM 线程的 Web Workers」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 WebAssembly (WASM) for High Performance Apps 课中编写并运行代码吗？

能。每节 WebAssembly (WASM) for High Performance Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 WebAssembly (WASM) for High Performance Apps