JS WebWorker详解-CSDN博客

本文链接：https://blog.csdn.net/feral_coder/article/details/93709271

前言：js是单线程这个特性不多赘序，单线程意味着一次只能做一件事，对于现代计算机来说，存在着多个CPU，如果只使用单线程，对CPU的利用率将大大降低。而web worker的出现正式为了解决这个问题，web worker允许在后台创建线程，可以将一些比较耗时的任务交给worker线程来做，在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。

一、使用注意项：

web worker受到同源限制，也就是只有在同源下才能使用，即协议相同，域名相同，端口号相同。
worker所在线程与主线程不一样，不能使用window,document,parent对象，不能操作dom元素，但是可以使用navigator和location对象
主线程与worker线程内存空间相互独立，不能直接通信，必须使用postMessage方法发送数据，使用onmessage事件接受数据，发送的数据可以使用任意格式，包括二进制数据。（shared worker是内存共享的，可以直接使用）
Worker 线程不能执行alert()方法和confirm方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
worker无法读取本地文件，所加载的脚本必须来源于网络。

二、使用：

主线程使用：

//调用Worker构造函数来创建一个worker线程，可以接受两个参数，第一个为worker线程的位置
//第二个为一个选项参数
var wk = new Worker('worker.js')
//监听消息
wk.onmessage = function(e) {
    let data = e.data
}
//发送消息
wk.postMessage("hello world")
//发送消息
wk.postMessage({name:"六只脚"})
//关闭
wk.terminate()

worker线程

//self与this都指代当先worker线程

self.addEventListener("message",function(e) {
    let data = e.data
    //TODO
})

//或者
this.addEventListener("message",function(e){})
//或者
addEventListener("message",function(e){})


//发送消息
self.postMessage({age:23})

//关闭自身，在worker内部关闭自己
self.close()

worker加载脚本

//worker内加载脚本，使用importScripts()方法

//加载一个脚本
importScripts('a.js')
//加载多个脚本
importScripts('a.js','b.js');

三、页面嵌入web worker

<!-- 可以通过script向当前页面注入一个web worker，type的类型必须是浏览器不认识的类型 --> 
<body>
    <script id="worker" type="app/worker">
      addEventListener('message', function () {
        postMessage('some message');
      }, false);
    </script>
  </body>

初探web worker