浏览器web workers 加速应用计算

单线程的JavaScript如果操作非常耗时的计算，会使页面几乎处于“假死”状态 —— 因为JS线程与页面渲染UI线程互斥。但现在提出了 Web Workers，就有了一个解决方案。

比如：页面中的大数值计算（排名？完成率统计？）

因为涉及到“两个JavaScript线程”，所以我觉得目前的最佳实践应该是用 postMessage 进行“通信”：

这里我们举一个“根据用户输入值计算响应的斐波那契数列”的例子：如果输入比较大的数，比如100，计算需要的时间会影响其他地方元素的加载。但是这里用了web workers，就没有这些问题了

<div class="calc">
	<input type="text" />
	<input type="button" value="计算" />
</div>
<div>
	计算结果：
	<div class="result"></div>
</div>

var input=document.querySelector('input[type="text"]')
var cal=document.querySelector('input[type="button"]')
var result=document.querySelector('.result')

cal.onclick=function(){
    
    
	var initValue=input.value
	var w=new Worker("./worker.js")
	w.postMessage(initValue)
	w.onmessage=function(e){
    
    
		result.innerHTML=result.innerHTML+initValue+"=>"+e.data+"<br />"
	}
}

而对于web workers线程的入口文件worker.js，其核心代码如下：

function fibo(n){
    
    
	return n<2?n:fibo(n-1)+fibo(n-2)
}
this.onmessage=function(e){
    
    
	var result=fibo(e.data)
	this.postMessage(result)
}

让UI线程和web workers线程之间通过消息机制互相传递数据，web workers线程可以启动多个，并且不会阻碍UI线程的运行。

当然，他也有自身的局限性：

不能跨域加载JS（很遗憾，postMessage就是为跨域通信而生，结果web workers不能跨域加载文件）
worker内代码中不能访问、操作DOM

浏览器web workers 加速应用计算

猜你喜欢