太原市微网站建设/软文广告经典案例300

   WebWorker为Javascript创造了多线程并发的程序执行环境，可以把一些耗时操作放入worker线程异步执行， 而后通知主线程绘制界面.

   Javascript采用的是单线程模型，也就是说几乎所有操作只在主线程中执行.

案例:

        创建一个耗时代码(斐波那契数列)，感受阻塞主线程的现象

1    1    2    3    5    8    13    21    34    55    89    .....

function fb(n){return n<3 ? 1 : fb(n-1)+fb(n-2)
}

使用WebWorker

1. 新建worker.js, 把需要执行的耗时代码写在这里.

   // worker.js  把耗时代码写在这里
   // 递归实现的斐波那契数列
   function fb(n){return n<3 ? 1 : fb(n-1) + fb(n-2)
   }
   console.log(fb(44))

2. 在html里的主线程js代码中, 创建Worker对象加载worker.js, 即相当于创建子线程并且执行worker.js中的耗时代码.

   <script>    
   // 为btn2绑定事件    
   btn2.addEventListener('click', ()=>{      // 创建并启动webworker, 异步执行worker.js的代码      let worker = new Worker('worker.js')    
   })
   </script>

注意: 千万注意new Worker()时要长个心眼, 防止worker创建过多. 理论上来讲一个页面中一般3~5个worker就够.

        所以一般情况下， 在页面加载时就创建webworker，但是仅仅创建，并不执行耗时代码. 当点击按钮或触发某些事件时，才去通知webworker执行耗时代码。就需要了解主线程与worker线程之间如何通信.

主线程与worker线程的通信

1、主线程向子线程发消息

        在页面加载时就创建webworker, 但是仅仅创建, 并不执行耗时代码. 当点击按钮时, 才去通知webworker执行耗时代码. 所以需要在主线程向子线程发消息.

主线程如何发?

let worker = new Worker('worker.js')worker.postMessage('数据')

子线程如何收?

worker.jsonmessage = (data)=>{    console.log(data) 
}

1、子线程向主线程发消息

子线程如何发?

worker.js中[this.]postMessage('结果')

主线程如何收?

let worker = new Worker('worker.js')worker.onmessage = (data)=>{    // 更新UI
}