`
lucifinilhades
  • 浏览: 84839 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 使用Web Worker处理线程

HTML5JavaScript线程
阅读更多

基础知识

Web Worker是在HTML5中新增的，用来在Web应用程序中实现后台处理的一项技术。使用这个API，用户可以很容易地创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间的处理交给后台去执行，对用户在前台页面中执行的操作就完全没有影响了。

创建后台线程的步骤很简单。只要在Worker类的构造器中将需要在后台线程中执行的脚本文件的URL作为参数，然后创建Worker对象就可以了，例如：

var worker = new Worker("worker.js");

注意：在后台线程中是不能访问页面或窗口对象的。 如果在后台线程的脚本文件中使用到window对象或document对象，则会引起错误的发生。

另外，可以通过发送和接收消息来与后台线程互相传递数据。通过对Worker对象的message事件句柄的获取可以在后台线程之中接收消息，使用方法如下：

worker.addEventListener("message", function(event) {
    // 处理接收的消息。
}, false);

使用Worker对象的postMessage()方法来对后台线程发送消息，发送的消息是文本数据，但也可以是任何JavaScript对象（需要通过JSON对象的stringify()方法将其转换成文本数据）。

worker.postMessage(message);

另外，同样可以通过获取Worker对象的message事件句柄及Worker对象的postMessage()方法在后台线程内部进行消息的接收和发送。

与线程进行数据的交互

使用后台线程时不能访问页面或窗口对象，但是并不代表后台线程不能与页面之间进行数据交互。示例中页面上随机生成一个整数数组，然后将该整数数组传入线程，挑选出数组中可以被3整除的数字，然后显示在页面的表格中，主页面代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8"/>
		<title>与线程进行数据交互</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">
$(function() {
	var intArray = new Array(100);
	for(var index = 0; index < intArray.length; index++) {
		intArray[index] = parseInt(Math.random() * 100);
	}
	var worker = new Worker("sumWorker.js");
	worker.postMessage(JSON.stringify(intArray));
	worker.addEventListener("message", function(event) {
		if(event.data != "") {
			var array = JSON.parse(event.data);
			var row, col;
			for(var index = 0; index < array.length; index++) {
				row = parseInt(index / 10);
				col = index % 10;
				if(col == 0) {
					$("<tr>").appendTo("tbody");
				}
				$("<td>").text(array[row * 10 + col]).appendTo("tbody tr:last");
			}
		}
	}, false);
});
		</script>
	</head>
	<body>
		<table>
			<caption>从随机生成的数字中抽取3的倍数并显示</caption>
			<tbody></tbody>
		</table>
	</body>
</html>

示例中使用的线程脚本代码如下：

self.addEventListener("message", function(event) {
	var data = JSON.parse(event.data);
	var returnArray = new Array();
	var temp;
	for(var index = 0; index < data.length; index++) {
		if((temp = data[index]) % 3 == 0) {
			returnArray.push(temp);
		}
	}
	self.postMessage(JSON.stringify(returnArray));
}, false);

线程嵌套

线程中可以嵌套子线程，这样我们可以把一个较大的后台线程切分成几个子线程，在每个子线程中各自完成相对独立的一部分工作。

单层嵌套

修改上例中的主页面script元素中的JavaScript代码如下：

$(function() {
	var worker = new Worker("randomWorker.js");
	worker.postMessage("");
	worker.addEventListener("message", function(event) {
		if(event.data != "") {
			var array = JSON.parse(event.data);
			var row, col;
			for(var index = 0; index < array.length; index++) {
				row = parseInt(index / 10);
				col = index % 10;
				if(col == 0) {
					$("<tr>").appendTo("tbody");
				}
				$("<td>").text(array[row * 10 + col]).appendTo("tbody tr:last");
			}
		}
	}, false);
});

其中“randomWorker.js” 脚本文本代码如下：

self.addEventListener("message", function(event) {
	var intArray = new Array(100);
	for(var index = 0; index < intArray.length; index++) {
		intArray[index] = parseInt(Math.random() * 100);
	}
	var worker = new Worker("sumWorker.js");
	// 把随机数组传递给子线程进行挑选工作。
	worker.postMessage(JSON.stringify(intArray));
	worker.addEventListener("message", function(event1) {
		self.postMessage(event1.data);  // 把挑选结果返回主页面。
	}, false);
}, false);

注意：在线程，向子线程提交消息时使用子线程对象的postMessage()方法，而向本线程的创建源发送消息时使用self.postMessage()方法。 在本线程中创建的挑选线程“sumWorker.js”脚本代码如下：

self.addEventListener("message", function(event) {
	var data = JSON.parse(event.data);
	var returnArray = new Array();
	var temp;
	for(var index = 0; index < data.length; index++) {
		if((temp = data[index]) % 3 == 0) {
			returnArray.push(temp);
		}
	}
	self.postMessage(JSON.stringify(returnArray));
        self.close();  // 关闭子线程。
}, false);

注意：在子线程中向发送源发送回消息后，如果该子线程不再使用，则可以使用self.close()方法关闭该子线程。

多层嵌套

要实现子线程与子线程之间的数据交互，其基本步骤如下：

  1. 先创建发送数据的子线程。
  2. 执行子线程中的任务，然后把要传递的数据发送给主线程。
  3. 在主线程接收到子线程传回来的消息时，创建接收数据的子线程，然后再把发送数据的子线程中返回的消息传递给接收数据的子线程。
  4. 执行接收数据子线程中的代码。

线程中可用的变量、函数与类

  • self：用来表示本线程范围内的作用域。
  • postMessage(msg)：向创建线程的源窗口发送消息。
  • onmessage：获取接收消息的事件句柄。
  • importScripts(urls)：导入其它JavaScript脚本文件。参数为该脚本文件的URL地址，可以导入多个脚本文件，导入的脚本文件必须与使用该线程文件的页面在同一个域中，并在同一个端口中。
  • navigator对象：与window.navigator对象类似，具有appName、platform、userAgent、appVersion等属性。
  • sessionStorage、localStorage：可以在线程中使用Web Storage。
  • XMLHttpRequest：可以在线程中处理Ajax请求。
  • Web Workers：可以在线程中嵌套线程。
  • setTimeout()、setInterval()：可以在线程中实现定时处理。
  • close()：结束本线程。
  • eval()、isNaN()、escape()等：可以使用所有JavaScript核心函数。
  • object：可以创建和使用本地对象。
  • WebSockets：可以使用WebSockets API来向服务器发送和接收信息。
分享到：
| HTML5 Web Sockets通信
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    深入HTML5WebWorker应用实践：多线程编程

    在HTML5中提出了工作线程（WebWorker）的概念，并且规范出WebWorker的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。WebWorker允许开发人员编写能够长时间运行而不被用户所中断的后台...

    Web Worker用法汇总

    HTML5 js后台实现多线程 克服js单线程导致页面卡死情况

    针对HTML5的Web Worker使用攻略

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。一：如何使用Worker 　Web Worker的基本原理就是在当前javascript的主线程中，使用...

    WebWorkerImgLoading:使用Web Worker加载图像

    这种方法的好处是，如果要加载大量的10k图像，则可以在Web Worker处理下载图像的繁重工作时呈现其余的UI。将[removed]标记移到或标记为异步的原因也是相同的。这些脚本的下载将阻止您的UI呈现，因此您希望尽可能地...

    浅谈HTML5 Web Worker的使用

    Web Worker是HTML5提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 一：如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中，使用Worker...

    JavaScript中的Web worker多线程API研究

    主要介绍了JavaScript中的Web worker多线程API研究,Web worker是HTML5的API,允许网页在安全的情况下执行多线程代码,需要的朋友可以参考下

    HTML5之多线程(Web Worker)

    这节我们来探讨一下多线程 Web-Worker。 一、明确 JavaScript 是单线程 JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 听起来有些匪夷所思，为什么不设计成多线程提高效率呢？我们可以...

    HTML5WebWorker深入浅出教程

    至2008年W3C制定出第一个HTML5草案开始，HTML5 承载了越来越多崭新的特性和功能。...Worker）的概念，并且规范出WebWorker的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。Web

    HTML5 Web Workers Demo多线程示例

    Workers 多线程学习DEMO,也可以直接使用。

    HTML5 Web Workers之网站也能多线程的实现

    Web Workers 是在HTML5中新增的，用来在web应用程序中实现后台处理的一种技术 在HTML4中，js创建的程序都是单线程的，如果花费时间比较长的话web界面就会长时间没有响应，最恶劣的情况还会跳出一个脚本提示框： 提示...

    quickbase-webworker:一组Webworker可以在单独的线程中运行，因为Quickbase无法

    Quickbase Web Workers Quickbase的javascript SDK很方便，但是可以在主UI线程上运行。 这会使您可能创建的任何代码页陷入困境，尤其是在涉及大数据时。...| - webworker.js | - yourCustomCodePage.js

    疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码

    18.2　与Worker线程进行数据交换 591 18.3　Worker线程嵌套 594 18.4　使用SharedWorker创建共享线程 597 18.5　Promise 603 18.6　本章小结 611 第19章　客户端通信 612 19.1　跨文档消息传递 613 19.2　使用...

    突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述

    Javascript执行机制 在HTML5之前，浏览器中JavaScript的运行都是以单线程的方式工作的，虽然有多种方式实现了对多线程的模拟（例如：...Javascript中的多线程 – WebWorker HTML5 中的 Web Worker 可以分为两种不同

    HTML5设计网络富客户端应用

    涉及了文档结构和语义、智能表单、视频与音频、画布、SVG与MathML、地理定位、Web存储与离线Web应用程序、WebSockets套接字、Web Worker多线程、微数据以及以拖曳为代表的一些全局属性，涵盖了HTML5所有的重要特性。...

    初识HTML5(入门级的,很好的)

    涉及了文档结构和语义、智能表单、视频与音频、画布、SVG与MathML、地理定位、Web存储与离线Web应用程序、WebSockets套接字、Web Worker多线程、微数据以及以拖曳为代表的一些全局属性，涵盖了HTML5所有的重要特性。...

    HTML5用户指南

    一个关于html5的技术讲解文档，主要目录如下： 第1章　主要结构 　[head] 　使用新的html 5结构化元素 　使用css样式化html 5 ...　使用web workers来线程化 　web sockets：使用流数据 　小结 　结语

    web前端基础入门教程之HTML5 Web Workers

    web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面！...

Magicbox
Global site tag (gtag.js) - Google Analytics