本文主要是介绍HTML5 Web Workers 详解 (2)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
三、高级使用
1. 多个 Web Workers
你可以在主线程中创建多个 Web Workers 来处理并行任务。例如，下面的代码创建了两个 Worker 并分别处理不同的任务。
主线程代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Multiple Web Workers Example</title>
</head>
<body><h1>Multiple Web Workers Example</h1><button onclick="startWorkers()">Start Workers</button><p id="result1"></p><p id="result2"></p><script>var worker1, worker2;// 启动多个 Web Workerfunction startWorkers() {// 检查浏览器是否支持 Web Workersif (typeof(Worker) !== "undefined") {if (!worker1) {// 创建第一个 Worker 实例worker1 = new Worker("worker1.js");// 定义 Worker 接收消息的处理函数worker1.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("result1").innerHTML = "Worker 1 result: " + event.data;};}if (!worker2) {// 创建第二个 Worker 实例worker2 = new Worker("worker2.js");// 定义 Worker 接收消息的处理函数worker2.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("result2").innerHTML = "Worker 2 result: " + event.data;};}// 向 Worker 发送消息worker1.postMessage("Start working 1");worker2.postMessage("Start working 2");} else {document.getElementById("result1").innerHTML = "Sorry, your browser does not support Web Workers...";document.getElementById("result2").innerHTML = "Sorry, your browser does not support Web Workers...";}}</script>
</body>
</html>
Worker 1 代码（worker1.js）
// worker1.js// 监听主线程发送的消息
onmessage = function(event) {var result = 0;// 模拟一个耗时计算任务for (var i = 0; i < 500000000; i++) {result += i;}// 向主线程发送结果postMessage(result);
};
Worker 2 代码（worker2.js）
// worker2.js// 监听主线程发送的消息
onmessage = function(event) {var result = 1;// 模拟一个耗时计算任务for (var i = 1; i < 1000; i++) {result *= i;}// 向主线程发送结果postMessage(result);
};
2. 共享 Worker
共享 Worker 可以被同一个页面的不同脚本或不同页面的脚本共享使用。需要通过 SharedWorker 构造函数来创建共享 Worker。
主线程代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shared Web Workers Example</title>
</head>
<body><h1>Shared Web Workers Example</h1><button onclick="startSharedWorker()">Start Shared Worker</button><p id="result"></p><script>var sharedWorker;// 启动共享 Web Workerfunction startSharedWorker() {// 检查浏览器是否支持 Shared Workersif (typeof(SharedWorker) !== "undefined") {if (!sharedWorker) {// 创建新的 Shared Worker 实例，指定工作脚本文件sharedWorker = new SharedWorker("sharedWorker.js");// 定义 Worker 接收消息的处理函数sharedWorker.port.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("result").innerHTML = event.data;};}// 向 Worker 发送消息sharedWorker.port.postMessage("Start shared working");} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Shared Web Workers...";}}</script>
</body>
</html>
共享 Worker 代码（sharedWorker.js）
// sharedWorker.js// 监听主线程发送的连接事件
onconnect = function(event) {var port = event.ports[0];// 监听连接端口的消息port.onmessage = function(event) {var result = "Shared Worker received: " + event.data;// 向连接端口发送结果port.postMessage(result);};
};
3. Worker 的限制
- 不能访问 DOM：Web Workers 没有访问 DOM 的权限。
- 同源策略：Web Workers 只能加载与其自身脚本同源的资源。
- 限制的 API：Web Workers 不能访问某些浏览器 API，例如
alert、confirm和localStorage等。
四、实战示例：计算质数
下面我们将展示一个更复杂的示例，
利用 Web Worker 来计算质数。
主线程代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Prime Number Calculation with Web Workers</title>
</head>
<body><h1>Prime Number Calculation with Web Workers</h1><button onclick="startPrimeWorker()">Start Prime Calculation</button><p id="primeResult"></p><script>var primeWorker;// 启动 Web Worker 进行质数计算function startPrimeWorker() {if (typeof(Worker) !== "undefined") {if (!primeWorker) {// 创建新的 Web Worker 实例，指定工作脚本文件primeWorker = new Worker("primeWorker.js");// 定义 Worker 接收消息的处理函数primeWorker.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("primeResult").innerHTML = "Largest Prime: " + event.data;};}// 向 Worker 发送消息primeWorker.postMessage(1000000); // 计算小于 1000000 的质数} else {document.getElementById("primeResult").innerHTML = "Sorry, your browser does not support Web Workers...";}}</script>
</body>
</html>
Web Worker 代码（primeWorker.js）
// primeWorker.js// 判断一个数是否为质数
function isPrime(num) {for (var i = 2; i <= Math.sqrt(num); i++) {if (num % i === 0) {return false;}}return num > 1;
}// 监听主线程发送的消息
onmessage = function(event) {var max = event.data;var largestPrime = 0;// 计算小于 max 的所有质数for (var i = 2; i <= max; i++) {if (isPrime(i)) {largestPrime = i;}}// 向主线程发送结果postMessage(largestPrime);
};
五、常见问题与解决方法
1. 为什么我的 Worker 无法访问 DOM？
Web Workers 设计为运行在独立的上下文中，因此无法直接访问 DOM。如果需要操作 DOM，可以通过消息传递与主线程通信，让主线程处理 DOM 操作。
2. 如何在 Worker 中使用外部脚本？
可以使用 importScripts 方法在 Worker 中加载外部脚本：
importScripts('script1.js', 'script2.js');
3. 如何调试 Web Workers？
调试 Web Workers 可以使用浏览器的开发者工具。在 Chrome 中，可以在 Sources 面板中找到 Worker 的脚本，并设置断点进行调试。
这篇关于HTML5 Web Workers 详解 (2)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
