`
lucifinilhades
  • 浏览: 86879 次
  • 性别: 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通信
评论
发表评论

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

相关推荐

    HTML5 WebWorker

    HTML5 Web Worker是Web开发中的一个关键特性，它允许在后台线程中执行脚本，以提高网页的响应速度和处理能力。Web Worker使得复杂的、计算密集型的任务可以在不阻塞用户界面的情况下运行，显著提升了Web应用的性能...

    使用HTML5 Web Worker提高Web的应用性能研究.pdf

    "使用HTML5 Web Worker提高Web应用性能研究" HTML5 Web Worker是HTML5提供的一种JavaScript多线程解决方案，可以在Web页面上并发运行多个JavaScript脚本，而不会阻塞用户界面。下面是使用HTML5 Web Worker提高Web...

    html5的Web线程

    HTML5的Web线程，全称为Web Workers，是HTML5引入的一个强大特性，旨在提高Web应用程序的性能和响应性。Web Workers允许在浏览器后台独立于主线程运行脚本，处理大量计算任务，避免了因为JavaScript执行阻塞而导致的...

    Web Worker版调用Face-Api.js

    主线程负责处理UI交互，而Worker线程则用于处理计算密集型任务。 2. **Face-API.js**：Face-API.js是一个JavaScript库，它提供了人脸识别和面部特征检测的功能，包括面部识别、表情识别、面部关键点检测等。它基于...

    Web Worker用法汇总

    总结来说，Web Worker是HTML5为JavaScript实现多线程处理而设计的一种技术，它可以提升网页应用的性能和用户体验，特别是在处理大量计算任务时。同时，尽管FileSystem API曾提供文件系统操作能力，但由于现代浏览器...

    前端开源库-web-worker-manager

    Worker线程与主线程通过消息传递进行通信，数据通过`postMessage()`发送，`onmessage`事件接收。 **Web Worker Manager的用处** Web Worker Manager作为一个开源库，它的主要目标是简化Web Worker的创建、管理和...

    向Webpack添加原生WebWorker捆绑支持

    Web Worker是HTML5引入的一个特性，用于在后台线程中执行脚本，以实现多线程处理，避免阻塞主线程。由于Web Worker的特殊性，其加载和运行机制与常规的JavaScript代码不同，因此需要特别处理。 为了在Webpack中添加...

    H5 web Worker

    **H5 Web Worker** 是HTML5中引入的一个重要特性，旨在解决现代Web应用程序中的多线程问题。在传统的Web开发中，JavaScript是单线程执行的，这意味着所有任务都在同一个线程上运行，如果遇到复杂的计算或者长时间的...

    HTML5 Web Workers Demo多线程示例

    总结来说，"HTML5 Web Workers Demo"是一个展示如何利用Web Workers在Web应用中实现多线程处理的示例。通过创建和使用Web Workers，开发者可以在不影响主线程和用户体验的情况下，处理那些对性能有较高要求的任务。...

    Html5+WebWorkers定时通讯心跳处理

    在"Html5+WebWorkers定时通讯心跳处理"的场景中，我们首先需要创建一个Web Worker脚本，这个脚本通常会包含心跳消息的发送逻辑。例如，worker.js可能包含以下代码： ```javascript self.addEventListener('message'...

    针对HTML5的Web Worker使用攻略

    创建一个Web Worker非常简单，首先你需要编写一个单独的JavaScript文件（如`worker.js`），这个文件将会在Worker线程中运行。例如： ```javascript // worker.js onmessage = function(event) { var data = event....

    Viajs实现在一个WebWorker中使用DOM

    为了解决这个问题，HTML5引入了Web Workers API，它允许在后台线程中执行脚本，从而不阻塞主线程。但Web Workers不能直接访问DOM，这限制了其在处理DOM操作时的应用。`Via.js`，正如标题所言，是一个创新性的库，它...

    vueworker以一种简单的方式使用webworkers的Vue插件

    Web Workers 是 HTML5 引入的一个特性，允许在浏览器后台线程中执行脚本，以提高应用的并行处理能力，避免主线程因大量计算而阻塞。`vue-worker` 插件就是将 Web Workers 的强大功能与 Vue.js 框架相结合，让开发者...

    JavaScript中的Web worker多线程API研究

    - 当主线程或Worker脚本结束时，所有的Worker线程也会随之关闭。 为了进一步提升Web Worker的易用性，开发者可以封装一些通用逻辑，例如，创建一个特定的Worker类，用于管理worker的生命周期和消息传递。通过封装，...

    react-reactworkerimage一个React组件实现通过webworker加载图像

    Web Worker是HTML5引入的一个特性，它允许在浏览器的后台线程中执行脚本，以进行计算密集型或长时间运行的任务，而不影响用户界面的响应速度。在图像加载场景中，由于图片数据量大，直接在主线程加载会使得页面变得...

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

    主线程通过`postMessage`方法向Worker线程发送了一个数字参数，然后在后台的Worker线程中接收到这个消息，并进行求和计算。计算完成后，使用`postMessage`将结果返回给主线程，主线程再通过`onmessage`事件处理函数...

    html5 web workers的作用及使用场景.docx

    主线程可以继续处理用户的交互事件，而Worker线程则在后台默默工作。由于Worker线程和主线程不在同一个上下文中，它们之间的通信是通过`postMessage`和`onmessage`方法实现的。`postMessage`用于在主线程和Worker...

    基于多线程大数框架decimaljs和webworker圆周率计算

    标题中的“基于多线程大数框架decimaljs和webworker圆周率计算”涉及了几个重要的编程技术，这些技术在JavaScript开发中具有显著的应用价值。首先，我们要理解以下几个关键概念： 1. **圆周率计算**：圆周率（Pi）...

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