084_html5WebWorkers

最新推荐文章于 2025-07-27 11:22:23 发布

原创最新推荐文章于 2025-07-27 11:22:23 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web前端

html学习专栏收录该内容

89 篇文章

订阅专栏

本文介绍了WebWorker的基本概念，包括其如何避免阻塞用户界面并提高网页性能。文章详细讲解了WebWorker的创建、消息传递机制及如何终止WebWorker，并提供了一个完整的实例代码。

1. web worker是运行在后台的JavaScript, 不会影响页面的性能。

2. 什么是Web Worker?

2.1. 当在html页面中执行脚本时, 页面的状态是不可响应的, 直到脚本已完成。

2.2. web worker是运行在后台的JavaScript, 独立于其他脚本, 不会影响页面的性能。您可以继续做任何愿意做的事情: 点击、选取内容等等, 而此时web worker在后台运行。

3. 浏览器支持: 所有主流浏览器均支持web worker, 除了Internet Explorer。

4. 检测 Web Worker 支持

4.1. 在创建web worker之前, 请检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined") {
	// Yes! Web worker support!
	// Some code.....
} else {
	// Sorry! No Web Worker support..
}

5. 创建web worker文件

5.1. 现在, 让我们在一个外部JavaScript中创建我们的web worker。

5.2. 在这里, 我们创建了计数脚本。该脚本存储于"demo_workers.js"文件中:

var i = 0;

function timedCount() {
	i = i + 1;
	postMessage(i);
	setTimeout("timedCount()", 500);
}

timedCount();

5.3. 以上代码中重要的部分是postMessage()方法: 它用于向html页面传回一段消息。

5.4. 注释: web worker通常不用于如此简单的脚本, 而是用于更耗费CPU资源的任务。

6. 创建Web Worker对象

6.1. 我们已经有了web worker文件, 现在我们需要从html页面调用它。

6.2. 下面的代码检测是否存在worker, 如果不存在, 它会创建一个新的web worker对象, 然后运行"demo_workers.js"中的代码:

if(typeof(w) == "undefined") {
	w = new Worker("demo_workers.js"); // 服务器上的一个js文件
}

6.3. 然后我们就可以从web worker发生和接收消息了。

6.4. 向web worker添加一个"onmessage"事件监听器:

w.onmessage = function(messageEvent) {
	document.getElementById("result").innerHTML = messageEvent.data;
};

6.5. 当web worker传递消息时, 会执行事件监听器中的代码。event.data中存有来自event.data的数据。

7. 终止Web Worker

7.1. 当我们创建web worker对象后, 它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

7.2. 如需终止web worker, 并释放浏览器/计算机资源, 请使用terminate()方法:

w.terminate();

8. 完整的Web Worker实例代码

8.1. 新建一个名叫WebWorkers的动态Web工程

8.2. worker.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>Web Workers</title>
	</head>
	<body>
		<p>计数: <output id="result"></output></p>
    	<button onclick="startWorker()">开始 Worker</button> 
    	<button onclick="stopWorker()">停止 Worker</button>
   		<br /><br />

	    <script type="text/javascript">
	    	var w;

	      	function startWorker() {
		        if(typeof(Worker) !== "undefined") {
		          	if(typeof(w) == "undefined") {
		            	w = new Worker("demo_workers.js");
		          	}

		          	w.onmessage = function (messageEvent) {
		            	document.getElementById("result").innerHTML = messageEvent.data;
		          	};
		        } else {
		          	document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
		        }
	      	}

	      	function stopWorker() { 
	        	w.terminate();
	      	}
	    </script>
	</body>
</html>

8.3. demo_workers.js

var i = 0;

function timedCount() {
	i = i + 1;
	postMessage(i);
	setTimeout("timedCount()", 500);
}

timedCount();

8.4. 启动服务器, 访问worker.html

9. Web Workers和DOM

9.1. 由于web worker位于外部文件中, 它们无法访问下例JavaScript对象:

9.1.1. window对象

9.1.2. document对象

9.1.3. parent对象