Web Workers的实际应用
无论您是在构建复杂的Web应用程序还是简单的网站，了解如何利用Web Workers都可以帮助您提高性能并提供更好的用户体验。
CPU-密集工作
假设我们有一个Web应用程序，需要执行一个大型的CPU密集型计算。如果我们在主线程中执行此计算，用户界面将变得无响应，用户体验将受到影响。为了避免这种情况，我们可以使用Web Worker在后台执行计算。
// 创建 Web Worker.
const worker = new Worker('worker.js');
// worker定义一个处理 message 的函数
worker.onmessage = function(event) {
const result = event.data;
console.log(result);
};
// 给 worker 发送一个消息开始 cpu的计算
worker.postMessage({ num: 1000000 });
// worker.js:
// 定义一个计算函数
function compute(num) {
let sum = 0;
for (let i = 0; i < num; i++) {
sum += i;
}
return sum;
}
// 主线程定义一个处理 message 的函数
onmessage = function(event) {
const num = event.data.num;
const result = compute(num);
postMessage(result);
};
在本例中，我们创建了一个新的WebWorker，并定义了一个函数来处理来自Worker的消息。然后，我们向worker发送一条带有参数（ num ）的消息，该参数指定了计算中要执行的迭代次数。
worker接收此消息并在后台执行计算。当计算完成时，工作线程将结果发送回主线程。主线程接收此消息并将结果记录到控制台。
此任务将从 0 到给定数字的所有数字相加。虽然这个任务对于小数字来说相对简单和直接，但对于非常大的数字来说，它可能会变得计算密集。
在上面使用的示例代码中，我们将数字 1000000 传递给Web Worker中的 compute() 函数。这意味着计算函数需要将从0到100万的所有数字相加。
这涉及大量的附加操作，并且可能需要大量的时间才能完成，特别是如果代码在较慢的计算机上运行，或者在已经忙碌其他任务的浏览器选项卡中运行。
通过将此任务移到Web Worker，应用程序的主线程可以继续平稳运行，而不会被计算密集型任务阻塞。这允许用户界面保持响应，并确保可以无延迟地处理其他任务，例如用户输入或动画。
