webWorker多线程原理

worker多线程是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能
一、多线程的原理:在火车站买票,如果只有一个售票窗口,很多人同时买票,这时就非常拥堵,耗时比较长,而且可能会发生安全事故,那么如果新开多个售票窗口,就能起到分流的效果,很快能买到票,不会发生异常情况
二、用法:
1.点击按钮创建多线程对象
2.发送数据
3.把比较复杂的运算放到多线程里面计算,然后把计算完的结果发送到前端页面
三、具体流程:

//a)前端页面
document.onclick = function(){
  console.time(1);
  let w = new Worker("worker.js"); //创建对象
  w.postMessage(5000);  //发送到work.js文件里面
  w.onmessage = function(e){
    box.innerHTML = e.data;  //e.data是work.js计算完成的结果
  }
  console.timeEnd(1);
}

//b)多线程处理页面work.js
importScripts("其它work.js文件");
self.onmessage = function(e){
  //要大量的计算,最好放在多线程里面,self指向全局的worker对象
  let str = "";
  for(let i = 0; i

对比不开多线程的时间

document.onclick = function(){
  //根据ASCII码生成大量的字符串
  console.time(1)
  let str = "";
  let num = 50000;
  for(let i=0; i

你可能感兴趣的:(webWorker多线程原理)