测试html5专用线程与共享线程的区别

帅的相对论

2013-12-19

这两天研究一下html5的多线程，根据网上的例子做了一下测试，觉得web worker确实很强大，但一直有一个概念一直不理解，做了个小例子测试一下专用线程和共享线程的区别。

一、专用线程与共享线程概念理解

与网上其他文章类似的文章参考其他相关资料，个人理解，专用线程只适用于当前客户端使用，与其他客户端无关联，适用于本客户端内的多线程使用。共享线程适用于多个客户端之间进行数据的交互和控制，但本身html5中没有类似锁机制，所以无安全可言，全靠个人修为。

二、专用线程测试

测试代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Background Worker Application Example 1: Complicated Number Computation</title>
</head>
<body>
	<form>
	<div>
		计算fibonacci, 请输入计算的数值：<input type="number" id="num" value="10" required="required" /><input type="button" value="计算" onclick="calc()"  />
		<br><br><div style="float:left;">结果：</div><div id="results" style="border-bottom:1px solid #ccc; width:200px;height:20px;float:left;font-size:9px;"></div>
	</div>
	</form>
	<script>
		var worker;
		onload = function() {
			worker = new Worker('js/numberworker.js');
			worker.addEventListener('message', function(event) {
				document.getElementById("results").innerHTML = event.data;
			}, false);
			worker.onerror = function(error) {
		        alert(error.message);
		    };
		};
		var calc = function(){
			worker.postMessage(parseInt(document.getElementById("num").value));
			document.getElementById("results").innerHTML = "please wait, computing ... ...";
		};
	</script>
</body>
</html>

numberworker.js 代码：

//关注connect_number在不同的浏览器实例中的值，各自为政，互不干涉
var connect_number = 0;
var fibonacci = function(n) {
	return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
};
onmessage = function(event) {
	connect_number++;
	var n = parseInt(event.data, 10);
	var result = "connection "+connect_number+ " is " + fibonacci(n);
	postMessage(result);
};

三、共享线程测试

参考代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shared worker example: how to use shared worker in HTML5</title>
</head>
<body onload=''>
	<output id="response_from_worker"> Shared worker example: how to use shared worker in HTML5 </output>
	<br>send instructions to shared worker:
	<input type="text" id="inputText" autofocus oninput="postMessageToSharedWorker(this);return false;" />
	<script>
		var worker = new SharedWorker('js/sharedworker.js');
		var log = document.getElementById('response_from_worker');
		worker.port.addEventListener('message', function(e) {
			//log the response data in web page 
			log.textContent = e.data;
		}, false);
		worker.port.start();
		worker.port.postMessage('ping from user web page..');

		//following method will send user input to sharedworker 
		function postMessageToSharedWorker(input) {
			//define a json object to construct the request 
			var instructions = {
				instruction : input.value
			};
			worker.port.postMessage(instructions);
		}
	</script>
</body>
</html>