在前端开发中，JavaScript 程序的执行通常是单线程的。这意味着如果我们想要在页面上进行计算密集型的操作或网络请求，可能会导致 UI 停止响应或卡顿。为了解决这个问题，Web Worker、Service Worker 和 Worklet 这三种技术被引入到了 Web 开发中。
Web Worker
Web Worker 是一种运行在后台的 JavaScript 线程，它可以让我们在不阻塞主线程的情况下执行计算密集型的任务。Web Worker 可以通过 Worker 构造函数创建：
----- ------ - --- --------------------
其中 worker.js 是我们要执行的脚本文件。Web Worker 主要用于如下场景：
- 计算密集型任务，比如图像处理、加密解密等。
- 大量数据的处理，比如排序、搜索等。
- 长时间运行的任务，比如音视频编解码、机器学习等。
以下是一个简单的示例，演示如何使用 Web Worker 实现斐波那契数列的计算：
-- ------- ----- ------ - --- -------------------- ---------------- - ----- -- - -------------------- ---------------- -- ----------------------- -- --------- -------- ------------ - -- -- - -- ------ -- ------ ----------- - -- - ----------- - --- - --------- - ----- -- - ----- ------ - ---------------------- -------------------- --
在上面的示例中，我们创建了一个 Web Worker，然后向它发送消息（40），Web Worker 在接收到消息后，开始计算斐波那契数列的值，并将结果通过 postMessage() 方法返回给主线程，最后主线程在 onmessage 回调函数中获取到计算结果并输出。
需要注意的是，Web Worker 无法访问 DOM，也无法与 UI 线程直接通信。如果需要更新页面上的内容，建议使用 postMessage() 方法与主线程进行通信，然后由主线程来更新 UI。
Service Worker
Service Worker 是一种运行在浏览器后台的脚本，它可以拦截和处理浏览器发出的网络请求，从而实现离线缓存、推送通知等功能。Service Worker 是一个独立的线程，它不依赖于页面，可以在页面关闭后继续运行。Service Worker 可以通过 navigator.serviceWorker.register() 方法注册：
-- ---------------- -- ---------- - ------------------------------------------ -
其中 sw.js 是我们编写的 Service Worker 脚本文件。以下是一个简单的示例，演示如何使用 Service Worker 实现离线缓存：
-- -----
----- ---------- - -----------
----- ----------- - -
----
--------------
--------------
-------------
--
-------------------------------- ----- -- -
----------------
---------------------------------- -- -
------ --------------------------
--
--
---
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
------ -------- -- ---------------------
--
--
---在上面的示例中，我们在 install 事件中打开一个缓存，并将指定的 URL 缓存到其中。在 fetch 事件中，如果请求匹配到了缓存，直接返回缓存中的响应；否则通过 fetch() 方法发起网络请求。
需要注意的是，Service Worker 只能在使用 HTTPS 或本地环境下运行，不能在 HTTP 环境中使用。此外，由于 Service Worker 是独立的线程，因此需要注意它与页面之间的通信方式，比如使用 `post
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/52409