19_HTML5 Web Workers --[HTML5 API 学习之旅]

HTML5 Web Workers 是一种允许 JavaScript 在后台线程中运行的技术，从而不会阻塞用户界面或其他脚本的执行。通过使用 Web Workers，你可以执行复杂的计算任务而不影响页面的响应速度，提升用户体验。

Web Workers 的特点

Web Workers 是 HTML5 引入的一种多线程解决方案，允许 JavaScript 代码在后台线程中运行。以下是 Web Workers 的一些关键特点：

1. 非阻塞用户界面

分离任务：Web Workers 可以将耗时的任务（如复杂的计算、数据处理等）移到后台线程执行，避免阻塞主线程，从而确保用户界面的流畅性和响应性。

2. 多线程支持

并发处理：通过创建多个 Worker 实例，可以同时处理不同的任务，充分利用多核处理器的能力，提高应用性能。

3. 消息传递机制

通信方式：主线程和 Worker 线程之间通过 postMessage() 方法发送消息，并使用 message 事件监听器接收消息。这种机制保证了线程间的安全通信。

4. 受限的环境

安全沙箱：为了防止潜在的安全问题，Worker 没有直接访问 DOM 或者某些全局对象（如 window、document、parent 等）的能力。然而，它们仍然可以访问一些常用的全局对象，比如 navigator 和 location。

5. 生命周期管理

动态控制：开发者可以根据需要创建、终止（terminate）或让 Worker 自我销毁（close）。这使得资源管理更加灵活，可以根据实际情况优化性能。

6. 独立于页面生命周期

持续运行：尽管 Web Workers 依赖于创建它的页面，但一旦启动，它们可以在页面刷新或导航到其他页面时继续运行，直到被显式终止或页面关闭为止。

7. 同源限制

安全性考虑：出于安全原因，Web Workers 只能加载来自同一来源（协议、域名、端口都相同）的脚本文件。跨域请求需要特别处理，通常涉及 CORS（跨域资源共享）策略。

8. 有限的数据共享

隔离性：每个 Worker 都有自己的作用域和内存空间，不能直接与其他 Worker 或主线程共享变量或状态。所有数据交换必须通过消息传递来完成。

9. 调试支持

开发工具集成：现代浏览器提供了对 Web Workers 的良好支持，包括专用的调试面板和日志输出功能，方便开发者进行故障排除和性能分析。

10. 多种类型

Dedicated Workers：专门为单个脚本服务，只能与创建它的脚本通信。
Shared Workers：允许多个浏览上下文（例如不同标签页）共享同一个 Worker 实例，实现更广泛的任务协作。
Service Workers：用于实现高级功能，如推送通知、后台同步以及离线缓存等，它可以在用户关闭浏览器后仍然保持活跃。

这些特点共同构成了 Web Workers 的强大功能集，使其成为构建高性能、响应式的Web应用程序的重要组成部分。特别是对于那些需要执行复杂计算或处理大量数据的应用来说，Web Workers 提供了一种有效的方式来提升用户体验。

创建和使用 Web Worker

以下是四个创建和使用 Web Worker 的示例，涵盖了不同类型的任务和应用场景。每个示例都展示了如何创建 Worker、发送消息以及处理来自 Worker 的响应。

示例 1：基本的 Web Worker

场景：在后台计算大数目的平方根，并将结果返回给主线程。

`worker.js` (Worker 文件)

self.onmessage = function(event) {let data = event.data;console.log('Received:', data);// 计算平方根let result = Math.sqrt(data);// 发送结果回主线程self.postMessage(result);
};

主页面代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Web Worker</title>
<script>
if (window.Worker) {var myWorker = new Worker('worker.js');myWorker.postMessage(1600); // 发送数据到 WorkermyWorker.onmessage = function(event) {console.log('Square root:', event.data);};
} else {console.log('Your browser does not support Web Workers.');
}
</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

示例 2：Shared Worker

场景：多个标签页共享同一个 Worker 来同步计数器值。

`shared-worker.js` (Shared Worker 文件)

var clients = [];self.onconnect = function(e) {var port = e.ports[0];clients.push(port);port.onmessage = function(event) {let action = event.data;if (action === 'increment') {for (let client of clients) {client.postMessage('Counter incremented');}}};port.start();
};

主页面代码（适用于多个标签页）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shared Worker Example</title>
<script>
if (window.SharedWorker) {var sharedWorker = new SharedWorker('shared-worker.js');sharedWorker.port.onmessage = function(event) {console.log(event.data);};// sharedWorker.port.postMessage('increment');setTimeout(function() {document.querySelector('button').onclick = function() {sharedWorker.port.postMessage('increment');};}, 300); // 1000 毫秒 = 1 秒} else {console.log('Your browser does not support Shared Workers.');
}
</script>
</head>
<body>
<button>Increase Counter</button>
</body>
</html>

在这里插入图片描述

示例 3：处理大量数据

场景：排序一个非常大的数组而不阻塞UI线程。

`sort-worker.js` (Worker 文件)

/*** 当Worker接收到消息时，此事件处理函数会被触发* 它对接收到的数据进行排序，并将排序后的结果发回* * @param {MessageEvent} event - 事件对象，包含从主线程发送过来的数据*/
self.onmessage = function(event) {// 从事件对象中获取传递过来的数组let array = event.data;// 对数组进行排序，确保数组中的数字按升序排列array.sort((a, b) => a - b);// 将排序后的数组发回主线程self.postMessage(array);
};

主页面代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Heavy Data Processing</title>
<script>
// 检查浏览器是否支持Web Workers
if (window.Worker) {// 创建一个新的Web Worker对象var sortWorker = new Worker('sort-worker.js');// 生成一个包含100万个随机整数的数组let largeArray = Array.from({length: 1e6}, () => Math.floor(Math.random() * 1e6));// 将大数组发送给Web Worker进行排序sortWorker.postMessage(largeArray);// 接收Web Worker返回的排序后的数组sortWorker.onmessage = function(event) {// 打印排序后的数组的前10个元素console.log('Sorted array:', event.data.slice(0, 10));};
} else {// 如果浏览器不支持Web Workers，打印提示信息console.log('Your browser does not support Web Workers.');
}
</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

示例 4：定时任务

场景：每隔一段时间向主线程发送更新通知。

`timer-worker.js` (Worker 文件)

// 每秒发送当前时间的时分秒表示，作为时间服务工作者的主循环
setInterval(function() {// 创建一个日期对象，并使用toLocaleTimeString方法获取当前时间的时分秒表示// self.postMessage用于向工作者的监听者发送消息，在这里发送的是当前时间self.postMessage(new Date().toLocaleTimeString());
}, 1000);

主页面代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timer Worker</title>
<script>
// 检查浏览器是否支持Web Workers
if (window.Worker) {// 创建一个新的Web Worker对象，加载'timer-worker.js'文件var timerWorker = new Worker('timer-worker.js');// 定义接收到Web Worker消息时的处理函数// 当Web Worker发送消息时，此函数将被调用，输出接收到的时间更新信息timerWorker.onmessage = function(event) {console.log('Time update:', event.data);};
} else {// 如果浏览器不支持Web Workers，输出提示信息console.log('Your browser does not support Web Workers.');
}
</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

这些示例展示了不同类型的 Web Worker 如何被用来解决各种问题，从简单的计算任务到复杂的交互式应用。根据你的具体需求和技术栈选择最适合的 Worker 类型。

注意事项

使用 HTML5 Web Workers 时，有几个重要的注意事项和最佳实践可以帮助你更有效地利用这项技术，并避免常见的陷阱。以下是详细的注意事项列表：

1. 浏览器兼容性

检查支持情况：尽管大多数现代浏览器都支持 Web Workers，但在使用之前应该检查目标用户的浏览器是否支持。可以通过 if (window.Worker) 这样的条件来检测支持。

2. 同源策略

资源加载限制：Web Workers 只能加载来自相同来源（协议、域名、端口）的脚本文件。如果你需要从不同来源加载脚本，则需要确保服务器正确配置了 CORS（跨域资源共享）头。

3. 通信机制

消息传递：Worker 和主线程之间的通信是通过 postMessage() 方法发送消息以及监听 message 事件实现的。所有传递的数据都是通过结构化克隆算法复制的，因此不适合传递大量数据或复杂对象。

4. 性能开销

创建和销毁成本：创建和销毁 Worker 都有一定的性能开销。对于轻量级任务，可能不值得启动一个新的 Worker；而对于复杂计算，使用 Worker 则非常有用。考虑将多个小任务合并为一个较大的任务来处理，以减少频繁创建和销毁 Worker 的次数。

5. 内存管理

及时终止：当不再需要 Worker 时，应该调用其 terminate() 方法来停止它，释放占用的资源。长期运行且不再使用的 Worker 会浪费系统资源。
避免内存泄漏：确保没有未处理的消息队列或者定时器在 Worker 中持续运行，这可能导致内存泄漏。

6. 安全性

受限环境：Workers 没有直接访问 DOM 或者某些全局对象的能力，这是为了提高安全性。不要试图绕过这些限制，因为它们有助于保护用户隐私和应用程序的安全性。

7. 调试困难

开发工具支持：虽然现代浏览器提供了对 Web Workers 的调试支持，但与普通 JavaScript 脚本相比，调试 Worker 仍然较为复杂。尽量编写清晰易懂的代码，并充分利用日志记录和断点调试功能。

8. 错误处理

捕获异常：在 Worker 内部发生的错误不会自动传播到主线程，因此你需要显式地添加错误处理逻辑。可以监听 Worker 的 error 事件来捕获并处理错误。

9. 数据共享

独立作用域：每个 Worker 都有自己的作用域和内存空间，不能直接与其他 Worker 或主线程共享变量或状态。所有数据交换必须通过消息传递完成。

10. 文件路径

相对路径问题：如果 Worker 文件使用相对路径加载，那么它的路径是相对于主页面的位置，而不是相对于 Worker 文件本身。确保路径设置正确，特别是在复杂的项目结构中。

11. 类型选择

选择合适的 Worker 类型：根据需求选择 Dedicated Worker 或 Shared Worker。Dedicated Worker 是专门为单个脚本服务的，而 Shared Worker 可以被多个浏览上下文共享。

12. Service Workers

区分用途：不要混淆 Web Workers 和 Service Workers。Service Workers 主要用于实现推送通知、后台同步以及离线缓存等功能，它们的工作方式与 Web Workers 不同。

遵循以上注意事项，可以帮助你在使用 Web Workers 时更加高效和安全，同时确保你的应用能够提供良好的用户体验。

类型

HTML5 Web Workers 提供了多种类型的 Worker，每种类型都有其特定的用途和适用场景。以下是主要的 Web Worker 类型及其特点：

1. Dedicated Workers

定义：Dedicated Workers 是最常见的 Worker 类型，它们专门为创建它们的脚本或页面服务。
通信：仅与创建它的脚本或页面进行通信，不能与其他 Worker 或其他浏览上下文共享。
生命周期：由创建它的脚本控制，当不再需要时可以显式终止（terminate()）或让 Worker 自我销毁（close()）。
使用场景：适合用于执行单个任务或与单个页面相关的后台处理。

创建 Dedicated Worker 示例：

// 在主页面中
var worker = new Worker('worker.js');worker.postMessage('Start processing');
worker.onmessage = function(event) {console.log('Message from worker:', event.data);
};

2. Shared Workers

定义：Shared Workers 可以被多个浏览上下文（如不同的标签页、iframe 等）共享。
通信：通过 Port 对象与各个客户端通信，每个客户端都需要调用 port.start() 来开始消息交换。
生命周期：只要有一个客户端连接着 Shared Worker，它就会继续运行；当所有客户端断开连接后，Worker 才会关闭。
使用场景：适用于需要在多个浏览器窗口或标签页之间共享数据或状态的应用程序。

创建 Shared Worker 示例：

// 在主页面中
var sharedWorker = new SharedWorker('shared-worker.js');sharedWorker.port.start();
sharedWorker.port.postMessage('Hello from page');
sharedWorker.port.onmessage = function(event) {console.log('Message from shared worker:', event.data);
};

3. Service Workers

定义：Service Workers 是一种特殊的 Worker，主要用于实现离线支持、推送通知和后台同步等功能。
通信：可以在用户关闭浏览器后仍然保持活跃，并拦截和处理网络请求。
生命周期：Service Worker 的生命周期是由浏览器管理的，它可以被激活、等待安装或直接跳过等待阶段。
使用场景：非常适合用于构建 PWA（渐进式Web应用），提供更好的用户体验，如离线访问、快速加载和推送通知等。

注册 Service Worker 示例：

if ('serviceWorker' in navigator) {window.addEventListener('load', function() {navigator.serviceWorker.register('/service-worker.js').then(function(registration) {console.log('ServiceWorker registration successful with scope: ', registration.scope);}, function(err) {console.log('ServiceWorker registration failed: ', err);});});
}