对H5新增多线程的理解与简单使用

对H5新增多线程的理解与简单使⽤
由于JavaScript的特性决定了JavaScript语⾔是⼀种单线程语⾔，但是有时候我们需要使⽤多线程⽐如进⾏⼤量的计算时。

H5为此新增了多线程的⽅法。

在这⾥我是⽤JavaScript来实现著名的斐波拉且数列，当我在输⼊框中输⼊第⼀个数字时返回这个数字所在位置的数字值。

主线程与分线程之间的关系图：
1、在不使⽤多线程时
HTML
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
JavaScript
// 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) //递归调⽤
}
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
var result = fibonacci(number)
alert(result)
}
在不使⽤多线程的情况下当我们输⼊⼀个较⼤的数值时，由于是递归调⽤并且计算量⼤就会造成页⾯处于⽆法操作状态只能等待计算完成后⽤户才可以操作界⾯
2、使⽤H5新增的多线程⽅法
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
//创建⼀个worker对象
var worker = new Worker('worker.js')
//绑定接受消息的监听
worker.onmessage = function (event) {
console.log('主线程接受分线程返回的数据：'+event.data)
alert(event.data)
}
//向分线程worker.js发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据：'+number)
}
分线程worker.js
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)
}
var onmessage = function (event) {
var number = event.data
console.log('分线程接收到了主线程发送的数据：'+number)
//计算
var result = fibonacci(number)
postMessage(result)
console.log('分线程向主线程返回数据：'+result)
}
通过分线程可以实现当⽤户输⼊⼀个较⼤的数值时，分线程进⾏计算主线程不受影响从⽽⽤户可以对页⾯进⾏操作（对输⼊框进⾏更改操作）。

多线程的不⾜：
现在还没有被所有浏览器⽀持。

分线程（worker.js）⾥⾯的代码不能对DOM进⾏操作（因为分线程的全局对象不是Windows）。

不能跨域加载js。

由于存在主线程与分线程之间的数据交换所以速度慢。

多线程在chorem浏览器本地运⾏时会报错，所以测试时使⽤localhost形式的路径访问。