js多线程解决方案Web Worker简单说明与实例演示

时间:2023-03-20 前端人人气:0

一、什么是Web Worker ?

JavaScript 语言是采用单线程模型，也就是任务只能在一个线程上完成，一次只能做一件事，前面任务没执行完，后面的任务只能排队等待，由于多核 CPU 的出现，单线程带来很大不便，无法充分发挥计算机的能力。

Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 worker 负担了，主线程就会很流畅。网页加载展示可分为两部分：主进程也叫 UI 进程，子进程也叫工作进程，子进程不能控制 UI 进程，只能进行数据交互。

Web Worker 子线程一旦创建成功，就会独立于其他脚本始终运行，不会被主线程上活动打断。这样有利于随时响应主线程的通信。但是这也造成 Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。

使用 Web Worker 注意点：

同源限制：分配给 Worker 线程运行的脚本，必须与主线程的脚本文件同源，否则存在跨域问题。
DOM限制：Worker 线程所在的全局对象，与主线程不同，无法读取主线程的DOM对象，也无法使用 window、document、parent 这些对象。但是Worker线程可以使用navigation和location对象。
数据通信：Worker 线程与主线程不在一个环境，不能直接通信，必须通过消息来完成数据通信。
脚本限制：Worker 线程不能执行 window 的 alert、confirm 方法。但是可以通过ajax发送请求。
文件限制：Worker线程无法读取本地文件，子线程加载的脚本必须来自网络。

相关API

1.Worker:构造函数，加载分线程执行的js文件
2.Worker.prototype.onmessage:用于接受另一个线程的回调函数
3.WorKer.prototype.postMessage:向另一个线程发送消息

**不足**
worker内代码不能操作DOM
不能跨域加载JS
不是每个浏览器都支持这个新特性

var input = document.getElementById('number')
function computed(n){
    return n<=2 ? 1:computed(n-1) + computed(n-2) //递归调用
}
document.getElementById('btn').onclick = function(){
    var number = input.value
    var result = computed(number)
    alert(result)
}

上面代码当按钮被点击时根据用户输入的值进行斐波拉契数列的计算
当这个值较大时，由于递归导致页面要很长时间才能响应，在等待响应的过程中由于js的单线程机制导致我们不能进行任何操作，页面就像被卡死了一样，如果要解决这个问题，可以用 web Wokers实现
将计算的逻辑交给分线程执行，这样在计算的过程中我们可以正常操作页面

//index.html
 var input = document.getElementById('number')
        
        document.getElementById('btn').onclick = function(){
            var number = input.value
            //创建一个worker对象
            var worker = new Worker('./js/worker.js')
            console.log(worker)
            //向分线程发送消息
            worker.postMessage(number)
            console.log('主线程向分线程发送数据：'+number)
            //绑定接受消息的监听
            worker.onmessage = function(event){
                console.log('主线程接受分线程返回的数据：'+event.data)
            }
        }

//worker.js
function computed(n){
    return n<=2 ? 1:computed(n-1) + computed(n-2) //递归调用
}

var onmessage = function(event){
    var number = event.data
    console.log('分线程接受主线程发送的数据：'+number)
    //计算
    var result = computed(number)
    postMessage(result)
    console.log('分线程向主线程返回数据：'+number)
}

二、使用语法

2.1 创建Worker线程：

创建worker之前，先检查浏览器是否支持它。使用 typeof 检查，代码如下：

if( typeof Worker !== undefined ){
 console.log("支持Worker线程")
}else{
 console.log("不支持Worker")
}

检查浏览器支持 worker 之后，主线程使用 new 命令，调用 worker() 构造函数，新建 Worker 线程。

var myWorker = new Worker('worker.js')

构造函数的参数是一个脚本文件，该文件不能是本地文件，必须来自网络脚本，该文件就是Worker 线程要执行的任务。如果该文件加载失败，Worker 就会失败。

2.2 主线程与子线程数据通信：

主线程调用 postMessage() 方法，向 Worker 发消息。postMessage(参数) 方法中参数就是传给 Worker 的数据，这个数据可以是任意格式。

myWorker.postMessage("你好")

紧接着 Worker 线程，通过 onmessage 指定监听函数，接收消息。worker.js 代码如下：

this.onmessage = function(res){
 console.log("接收到消息",res.data)
 this.postMessage("我收到消息了")
}

worker子进程收到消息之后，可以继续向主进程发送消息，使用 postMessage()。代码如上。

主进程也通过onmessage监听函数接收消息。

myWorker.onmessage = function(res){
 console.log("主线程收到消息：",res.data)
}

2.3 Worker线程

Worker线程内部，添加 this.onmessage 监听函数，其中 this 是子线程的全局对象，也可以替换成 self，self 代表子线程本身。等同于：

self.onmessage    《=》 this.onmessage

除了使用 self.onmessage 指定监听函数，也可以使用 this.addEventListener() 监听事件对象。上述 worker.js 代码可改为：

//写法一
this.addEventListener("message",function(res){
 console.log("res",res.data)
})
//写法二
addEventListener("message",function(res){
 this.console.log("1",res.data)
})

2.4 错误处理

主线程可以监听Worker是否发生错误，如果发生错误，Worker 会触发主线程的 error 事件。

// 写法一
myWorker.onerror = function(e){
 console.log('e',e)
}
//写法二
myWorker.addEventListener("error",function(e){
 console.log("e",e)
})

worker 子线程也可以监听 error 事件。

2.5 关闭 Worker

Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。主线程和子线程都可以关闭。

//主线程关闭
myWorker.terminate() 
 
//子线程关闭
self.close() //方法一
this.close() //方法二

三、同一个网页的Web Worker

通常情况下，Worker 载入的是一个单独的 javascript 文件，但是也可以载入与主线程在同一个网页的代码。网页中添加 Worker 脚本，必须注意指定script标签的type属性是一个浏览器不认识的值，否则就会失去意义。如：

<script type="app/worker" id="wrs">
 this.onmessage = function(res){
  console.log("接收参数",res.data)
 }
</script>

然后，需要读取这段代码，先将嵌入网页的脚本代码转成二进制对象，然后为这个二进制对象生成url，再让worker加载url,这样就实现了主进程和worker在同一个网页内。代码如下：

<script>
 var blob = new Blob([document.querySelector("#wrs").textContent]);
 var url = window.URL.createObjectURL(blob);
 var worker = new Worker(url)
 worker.postMessage("发送数据")
</script>

四、Worker 属性和方法总结

Worker构造函数方法：

Worker.postMessage() - 发送消息。
Worker.onmessage() - 监听子线程发送过来的数据。
Worker.onmessageerror() - 发送数据无法序列化时触发事件。
Worker.onerror() - 错误处理。
Worker.terminate() - 结束Worker。

子进程属性方法：

Worker() 构造函数，可以接受两个参数，第一个是脚本的地址，第二个是参数是配置对象，该对象指定Worker的名称。如：

var myWorker = new Worker('worker.js', { name : 'myWorker' });

self.name - Worker 的名字
self.onmessage - 接收消息
self.postmessage - 发送数据
self.onerror - 错误处理
self.onmessageerror - 发送的数据无法序列化成字符串时触发事件
self.close - 关闭Worker线程
self.importScript() - 加载js脚本

加载全部内容