JavaScript 是现代 Web 应用开发的主要语言之一，但是在大型应用中，JavaScript 的运行速度可能会成为瓶颈，甚至会导致用户体验下降。在这种情况下，使用 web workers 可以帮助我们提升 JavaScript 的运行速度。
什么是 web workers？
web workers 是一种在浏览器背景下运行的 JavaScript 线程。与主线程相比，web workers 在单独的线程中运行，因此可以在执行 JavaScript 代码时不阻塞用户界面。
创建一个 web worker 可以使用 new Worker() 构造函数。
const worker = new Worker('worker.js');上面的代码将创建一个 worker.js 文件，并将其作为参数传递给 Worker() 函数。要向 web worker 发送消息，可以使用 postMessage() 方法，例如：
worker.postMessage('hello worker!');在 web worker 内部，可以通过监听 message 事件来接收主线程发送的消息。例如：
self.addEventListener('message', e => {
console.log('Received message in worker: ' + e.data);
});如何使用 web workers 提升性能？
在 Web 应用中，JavaScript 可能会因为计算量大、DOM 操作等原因导致页面响应变慢。在这种情况下，可以将计算耗时的逻辑移动到 web worker 中，以充分利用多核 CPU 的优势。例如，下面的代码将计算斐波那契数列的逻辑移动到 web worker 中。
-- -------------------- ---- -------
-- ---
----- ------ - --- --------------------
-----------------------
-- ---------
-------- ------------ -
-- -- --- - -- - --- -- -
------ --
- ---- -
------ ----------- - -- - ----------- - ---
-
-
-------------------------------- - -- -
----- ------ - ------------------
-------------------------
---在上面的示例中，主线程通过将要计算的斐波那契数列的参数（40）作为消息发送给 web worker，在 web worker 内部使用递归算法计算斐波那契数列，并将结果作为消息发送回主线程。
另一个使用 web workers 的场景是异步加载和处理数据。例如，在 Web 应用中，我们可能需要从数据库中获取大量数据，然后在客户端进行分析和处理。在这种情况下，可以使用 web workers 在后台异步加载数据，以避免阻止用户界面。
注意事项
在使用 web workers 时，需要遵循以下几点：
- web workers 仅能访问与其它线程共享的受限 JavaScript API，例如 XMLHttpRequest。因此，无法访问 DOM 和其它浏览器 API。
- 由于 web workers 在单独的线程中运行，因此它们无法与主线程共享内存。与主线程通信时应该使用
postMessage()和onmessage事件。 - 在 web workers 内部，不能使用
window和document对象。 - 如果由于某种原因 web worker 的运行出现问题，它可能会在后台默默地失败，这可能会导致用户难以诊断的错误。因此，在使用 web workers 时，一定要做好错误处理。
总结
web workers 是一种在浏览器背景下运行的 JavaScript 线程，可以帮助我们提升 JavaScript 的运行速度。它们可以与主线程通信，但需要注意遵循一些限制。
使用 web workers 可以将计算耗时的逻辑移动到后台线程中，以避免阻止用户界面。在 Web 应用中，我们还可以使用 web workers 异步加载和处理数据，以提高应用的性能。
当我们的应用需要进行大量的计算、数据处理以及 DOM 操作时，使用 web workers 是一个值得尝试的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496ca2e48841e98944001b0