三、高级使用
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 Worker
function startWorkers() {
// 检查浏览器是否支持 Web Workers
if (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 Worker
function startSharedWorker() {
// 检查浏览器是否支持 Shared Workers
if (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 的脚本,并设置断点进行调试。