html5 Workers

最新推荐文章于 2021-06-26 03:23:17 发布

沈纵情

最新推荐文章于 2021-06-26 03:23:17 发布

阅读量617

点赞数

分类专栏： html5-web 文章标签： html5 function class button input output

本文链接：https://blog.csdn.net/jianguo_liao19840726/article/details/7641853

版权

html5-web 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

相关的说明：

Web Worker 规范不只是向 JavaScript 和 Web 浏览器添加并发性，桌面应用程序开发人员一直在使用多线程来支持他们的应用程序访问多个 I/O 资源，以避免在等待这些资源时冻结 UI。然而，当这些多线程更改共享的资源（包括 UI）时，这样的应用程序通常会出现问题，因为这种行为可能会导致应用程序冻结或崩溃。有了 Web Workers，这种情况就不会发生。衍生线程不能访问主 UI 线程访问的资源。事实上，衍生线程中的代码甚至不能与主 UI 线程执行的代码位于同一个文件中。如果你和我一样，开发过andorid，肯定会对这个感受很深。

<!DOCTYPE html>
<html>
 <head>
  <title>HTML5__Web Workers(仅支持FF3.5+、Opera 10.6+、Chrome 3+、Safari 4)</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://www.codediesel.com/demos/workers/view.css" />
 </head>

 <body id="main_body">
  
<img id="top" src="http://www.codediesel.com/demos/workers/top.png" alt=""> 
<div id="form_container"> 
	<h1><a>Untitled Form</a></h1> 
	<form id="main" class="appnitro"  method="post" action=""> 
		<div class="form_description"> 
			<h2 id="title"></h2> 
		</div>						
		<ul > 
			<li id="li_2" > 
				<label class="description" for="element_2">X </label> 
				<div> 
					<input id="x" name="x" class="element text medium" type="text" maxlength="255" value="3"/> 
				</div> 
			</li>
			<li id="li_3" > 
				<label class="description" for="element_3">Y </label> 
				<div> 
					<input id="y" name="y" class="element text medium" type="text" maxlength="255" value="3"/> 
				</div> 
			</li>		
			<li id="li_1" > 
				<label class="description" for="element_1">Messages </label> 
				<div> 
					<textarea id="output" name="output" class="element textarea medium"></textarea> 
				</div> 
			</li> 
			<li class="buttons"> 
				<input type="hidden" name="form_id" value="87137" /> 
				<input id="addButton" class="button_text" type="button" value="Add" /> 
				<input id="multButton" class="button_text" type="button"  value="Multiply" /> 
				<input id="killButton" class="button_text" type="button" value="Stop Worker" /> 
				<input id="clearBtn" class="button_text" type="button" value="Clear" /> 
			</li> 
		</ul> 
	</form>	
	<div id="footer"></div> 
</div> 
<img id="bottom" src="http://www.codediesel.com/demos/workers/bottom.png" alt=""> 

<script type='text/javascript'>
 
!(function() {
	

	var getWebWorkerSupport = function() {
		return (typeof(Worker) !== "undefined") ? true:false;
	}

	var getElem = function(id) {
		return typeof id === 'string' ? document.getElementById(id) : id;
	}

	var worker,
		isSupport = getWebWorkerSupport();


	if (isSupport) {
		
		var createWorker = function() {
			if (worker) {
				return ;
			}

			worker = new Worker("worker.js");
			worker.onmessage = function(evt) {
				getElem("output").value += evt.data + '\n';
			}
			worker.onerror = function(evt) {
				getElem("output").value += "\n在第["+ evt.lineno +"]行发生错误: " + evt.message;
			}
		}

		getElem("multButton").onclick = function() {
			createWorker();

			var x = document.getElementById("x").value;
			var y = parseFloat(document.getElementById("y").value);

			var str = "mult_" + x + "_" + y;
			
			worker.postMessage(str);
		}
		
		getElem("addButton").onclick = function() {
			createWorker();

			var x = document.getElementById("x").value;
			var y = parseFloat(document.getElementById("y").value);

			var str = "add_" + x + "_" + y;
			worker.postMessage(str);
		}

		getElem("killButton").onclick = function() {
			if (worker) {
				worker.terminate();
				worker = null;
			}
		}
	} else {
		getElem("multButton").disabled = getElem("addButton").disabled = getElem("killButton").disabled = true;
	}

	getElem("title").innerHTML = "您当前使用的浏览器"+(isSupport ? "支持" : "<em class='error'>不支持</em>")+"Web Worker";

	getElem("clearBtn").onclick = function() {
		getElem("output").value = "";
	}
})();
</script>

 </body>
</html>

 
function addNumbers(x,y) {
    return x + y;
}
 
function mulNumbers(x,y) {
    return x*y;
}
 
this.onmessage = function (event) {
    var msg = event.data,
		arr = msg.split("_"),
		op = arr[0],
		x = (arr[1] || "")|0,
		y = (arr[2] || "")|0;

    switch(op) {
        case 'mult':
			postMessage( x + "*" + y + "=" + mulNumbers(x, y));
			break;
        case 'add':
			postMessage( x + "+" + y + "=" + addNumbers(x, y));
			break;
        default:
			postMessage("Wrong operation specified");
    }

	var i = 1;
	while (i < 1000*1000*1000) {
		if (i % 500000 === 0) {
			postMessage(i);
		}
		i++;
	}

};

我是个android开发者，是搞车载系统应用开发，下面一段话是我为什么学习html5的原因：

从 Android 2.0 开始，Android 浏览器就拥有了对 HTML 5 Web Worker 规范的全面支持。在撰写本文之时，最新的 Android 设备（包括非常流行的 Motorola Droid）已配置了 Android 2.1。

智能手机浏览器上的 Web Worker 支持很不错，而且一直在不断改进。这就提出了一个问题：什么时候需要在移动 Web 应用程序中使用 Workers？答案很简单：需要完成耗时的任务的任何时候。有些示例展示了如何将 Workers 用于执行密集的数学计算，比如计算 1 万位数的圆周率。很可能您永远也不需要在 Web 应用程序上执行这样一个计算，在移动 Web 应用程序上执行这种计算的几率则更小。但是，从远程资源检索数据则相当常见，这也是本文示例的关注点。

沈纵情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 Workers

相关的说明：Web Worker 规范不只是向 JavaScript 和 Web 浏览器添加并发性，桌面应用程序开发人员一直在使用多线程来支持他们的应用程序访问多个 I/O 资源，以避免在等待这些资源时冻结 UI。然而，当这些多线程更改共享的资源（包括 UI）时，这样的应用程序通常会出现问题，因为这种行为可能会导致应用程序冻结或崩溃。有了 Web Workers，这种情况就不会发生。衍生线
复制链接

扫一扫