javascript Worker 教程
文章目录
一般遇到计算量大,占用内存的高的场景,应该考虑使用 javascript Worker ,它让javascript从单线程变为了多线程。
它的最大优点是,通过多线程避免了因为大量的计算导致页面卡顿。我们看下下面这个例子。
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>Document</title>
</head>
<body>
<h1>hello world</h1>
<input type="text">
<script>
let a = 1000000;
for (let i = 0; i < a; i++) {
console.log(i);
}
</script>
</body>
</html>
当你打开这个文件的时候,页面会卡死,用户无法输入任何内容,导致用户体验非常不好。
使用 Worker 也很简单,如下:
首先我们需要判断浏览器是否支持 Worker。
if (window.Worker) {
// ........
}
然后创建一个新文件worker.js,内容如下:
let a = 1000000;
for (let i = 0; i < a; i++) {
console.log(i);
}
postMessage('执行完毕')
接着再我们index.html中调用 Worker:
// 检测是否支持worker
if (window.Worker) {
var myWorker = new Worker('./worker.js');
myWorker.onmessage = function (e) {
console.log('接收到消息:', e);
}
}
刷新index.html页面执行,可以发现页面没有卡顿了,即使计算量很大。
执行方法:
index.html
标题 | 内容 |
---|---|
发送消息 | myWorker.postMessage() |
接收消息 | myWorker.onmessage=()=>{} |
终止 | myWorker.terminate() |
worker.js
发送消息 | 接收消息 |
---|---|
发送消息 | postMessage() |
接收消息 | onmessage=()=>{} |
终止 | close() |
使用Worker虽然很好,但依旧需要考虑它的兼容性。