JavaScript高级day47--js中的Web Workers

方法一：递归实现斐波那契数列：

<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>

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

问题：在计算斐波那契数列数控制界面不能进行操作

解决：H5规范提供了js分线程的实现, 取名为: Web Workers，使用分线程计算斐波那契

方法二：使用分线程实现斐波那契数列

<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>

var input = document.getElementById('number')
  document.getElementById('btn').onclick = function () {
    var number = input.value

    //创建一个Worker对象
    var worker = new Worker('worker.js')
    // 绑定接收消息的监听 线程中的数据存在data属性中
    worker.onmessage = function (event) {
      console.log('主线程接收分线程返回的数据: '+event.data)
      alert(event.data)
    }

    // 向分线程发送消息
    worker.postMessage(number)
    console.log('主线程向分线程发送数据: '+number)
  }
  // console.log(this) // window

创建分线程worker.js文件

//计算的方法
function fibonacci(n) {
  return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
}

console.log(this)
this.onmessage = function (event) {
  var number = event.data
  console.log('分线程接收到主线程发送的数据: '+number)
  //计算
  var result = fibonacci(number)
  postMessage(result)
  console.log('分线程向主线程返回数据: '+result)
  // alert(result)  alert是window的方法, 在分线程不能调用
  // 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
}

分线程中的全局对象不再是window,（而是下图中的DedicatedWorkerGlobalScope） 所以在分线程中不可能更新界面,即不能操作dom。

相关API

• Worker: 构造函数, 加载分线程执行的js文件
• Worker.prototype.onmessage: 用于接收另一个线程的回调函数
• Worker.prototype.postMessage: 向另一个线程发送消息

不足

• worker内代码不能操作DOM(更新UI) 分线程中全局对象不是window了所以不能操作dom
• 不能跨域加载JS
• 不是每个浏览器都支持这个新特性