在 Web Workers 中使用 postMessage 和 onmessage

首先，需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来，参数是需要在另一个线程中运行的 JavaScript 文件名称。然后在这个实例上监听 onmessage 事件。最后另一个线程中的 JavaScript 就可以通过调用 postMessage 方法在这两个线程间传递数据了。

清单 1. 主线程中创建 Worker 实例，并监听 onmessage 事件
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
 <title>Test Web worker</title> 
 <script type="text/JavaScript"> 
	 function init(){ 
		 var worker = new Worker('compute.js'); 
		 //event 参数中有 data 属性，就是子线程中返回的结果数据
		 worker.onmessage= function (event) { 
			 // 把子线程返回的结果添加到 div 上
			 document.getElementById("result").innerHTML += 
			    event.data+"<br/>"; 
		 }; 
	 } 
 </script> 
 </head> 
 <body onload="init()"> 
 <div id="result"></div> 
 </body> 
 </html>

在客户端的 compute.js 中，只是简单的重复多次加和操作，最后通过 postMessage 方法把结果返回给主线程，目的就是等待一段时间。而在这段时间内，主线程不应该被阻塞，用户可以通过拖拽浏览器，变大缩小浏览器窗口等操作测试这一现象。这个非阻塞主线程的结果就是 Web Workers 想达到的目的。

清单 2. compute.js 中调用 postMessage 方法返回计算结果
 var i=0; 

 function timedCount(){ 
	 for(var j=0,sum=0;j<100;j++){ 
		 for(var i=0;i<100000000;i++){ 
			 sum+=i; 
		 } 
	 } 
	 // 调用 postMessage 向主线程发送消息
	 postMessage(sum); 
 } 

 postMessage("Before computing,"+new Date()); 
 timedCount(); 
 postMessage("After computing,"+new Date());
图 1. 浏览器中运行结果

浏览器中运行结果