Web Worker 可以为 JavaScript 创建多线程环境,可以将一部分任务分配给分线程处理,从而不阻塞主线程的运行。通过 Web Worker 创建的分线程和主线程是同时运行互不干扰的。具体的Web Worker的相关知识,大家可以参考阮一峰大神的博客。
Web Worker 在使用过程中需要注意的是分线程创建之后,为了随时响应主线程的通信会始终运行在后台。所以 Worker 是比较消耗资源的,且不会自动关闭。
当然为了解决这个问题 Web Worker 为我们提供了手动关闭的方法,那么怎么确定 Worker 当前的状态呢?我们需要借用 Chrome 的开发者工具进行确认。
首先先上一段代码:
<!--
* @Description: html5 的 Web Workers
* @FilePath: /JavaScript基础/WebWorker/index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Worker</title>
</head>
<body>
<input type="text" name="number" id="number" />
<button id="btn">计算</button>
<script>
var input = document.querySelector("#number");
document.querySelector("#btn").onclick = function () {
var number = input.value;
var anotherWorker = new Worker("anotherWorker.js");
anotherWorker.onmessage = function (event) {
console.log(event.data);
};
anotherWorker.postMessage("向anotherWorker发送信息");
};
</script>
</body>
</html>
/*
* @FilePath: /JavaScript基础/WebWorker/anotherWorker.js
*/
(function () {
this.onmessage = function (event) {
console.log(event.data);
postMessage("anotherWorker 返回数据");
};
})();
执行效果如下:
此时,在 Chrome 的开发者工具的 Sources 标签下的 Page 树是这个样子的:
这个红框就是我们创建的 Worker。
多次调用后我们发现:
新的 Worker 在不断创建,旧的 Worker 也不会自动关闭。这样会造成资源的浪费。那么,就需要我们手动关闭 Worker。
我们先给 Worker 增加一个close()
。
/*
* @FilePath: /JavaScript基础/WebWorker/anotherWorker.js
*/
(function () {
this.onmessage = function (event) {
console.log(event.data);
postMessage("anotherWorker 返回数据");
this.close(); // 在分线程返回数据后关闭这个 Worker
};
})();
运行效果如下:
Worker 正常运行。
从 Sources 标签下的 Page 树中可以看到,这些 Worker 在数据返回后被彻底关闭了。
当然,你也可以在主线程的回调里关闭 Worker,效果是一样的。时机不同,按需取用。
var anotherWorker = new Worker("anotherWorker.js");
anotherWorker.onmessage = function (event) {
console.log(event.data);
anotherWorker.terminate(); // 在主线程关闭 Worker
};
anotherWorker.postMessage("向anotherWorker发送信息");
总结一下:
- Worker 不能自动关闭,需要我们手动关闭
- Worker 可以在分线程通过
self.close()
进行关闭,也可以在主线程通过worker.terminate()
进行关闭- 我们可以通过 Chrome 和开发者工具中的 Sources 标签下的 Page 树来观察 Worker 的状态,以确定 Worker 是否被成功创建/关闭。