ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【js】js多线程解决方案Web Worker简单说明与实例演示： [打印本页]

---

作者: 金歌    时间: 2024-6-8 22:48
标题: 【js】js多线程解决方案Web Worker简单说明与实例演示：

---

一、文档：

使用 Web Workers - Web API 接口参考 | MDN
js多线程解决方案Web Worker简单说明与实例演示_根本知识_脚本之家
JS多线程API webworker应用场景有哪些_根本知识_脚本之家
二、什么是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，不是每个欣赏器都支持这个新特性

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

复制代码

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

1. //index.html
2. var input = document.getElementById('number')
3. document.getElementById('btn').onclick = function(){
4.   var number = input.value
5.   //创建一个worker对象
6.   var worker = newWorker('./js/worker.js')
7.   console.log(worker)
8.   //向分线程发送消息
9.   worker.postMessage(number)
10.   console.log('主线程向分线程发送数据：'+number)
11.   //绑定接受消息的监听
12.   worker.onmessage = function(event){
13.       console.log('主线程接受分线程返回的数据：'+event.data)
14.   }
15. }
17. //worker.js
18. function computed(n){
19.     returnn<=2 ? 1:computed(n-1) + computed(n-2) //递归调用
20. }
22. var onmessage = function(event){
23.     var number = event.data
24.     console.log('分线程接受主线程发送的数据：'+number)
25.     //计算
26.     var result = computed(number)
27.     postMessage(result)
28.     console.log('分线程向主线程返回数据：'+number)
29. }

复制代码

五、使用语法：

【1】创建Worker线程：

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

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

复制代码

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

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

复制代码

构造函数的参数是一个脚本文件，该文件不能是本地文件，必须来自网络脚本，该文件就是Worker 线程要执行的使命。如果该文件加载失败，Worker 就会失败。
【2】主线程与子线程数据通信：

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

1. myWorker.postMessage("你好") |

复制代码

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

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

复制代码

worker子进程收到消息之后，可以继续向主进程发送消息，使用 postMessage()。代码如上。
主进程也通过onmessage监听函数接收消息。

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

复制代码

【3】 Worker线程

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

1. self.onmessage    《=》 this.onmessage

复制代码

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

1. //写法一
2. this.addEventListener("message",function(res){
3. console.log("res",res.data)
4. })
5. //写法二
6. addEventListener("message",function(res){
7. this.console.log("1",res.data)
8. })

复制代码

【4】 错误处理

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

1. // 写法一
2. myWorker.onerror = function(e){
3. console.log('e',e)
4. }
5. //写法二
6. myWorker.addEventListener("error",function(e){
7. console.log("e",e)
8. })

复制代码

worker 子线程也可以监听 error 事件。
【5】 关闭 Worker

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

1. //主线程关闭
2. myWorker.terminate()
3.   
4. //子线程关闭
5. self.close() //方法一
6. this.close() //方法二

复制代码

六、同一个网页的Web Worker

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

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

复制代码

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

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

复制代码

七、Worker 属性和方法总结

【1】Worker构造函数方法：

   

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

  【2】子进程属性方法：

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

1. 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脚本
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4