HTML5 Web Worker_html worker-CSDN博客

本文介绍HTML5 Web Worker的应用实例，演示如何创建并利用Worker进行后台任务处理，同时保持主线程的流畅运行。文章展示了如何通过JavaScript实现Worker对象的创建、数据通信及浏览器兼容性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script>
			//WEB页主线程;
			var worker=new Worker("js/worker.js");
			//创建一个Worker对象，并向它传递将在新线程中;
			worker.postMessage("hello world SB"); //向worker发送数据
			worker.onmessage=function(evt){    //接收Worker传过来的数据函数
				console.log(evt.data);
				alert(evt.data);
			}
			/*检测浏览器是否支持*/
			$(function(){
				if(typeof(Worker)=="undefined"){
					$("#support").html("浏览器不支持HTML5 Web Worker！");
				}else{
					$("#support").html("浏览器支持Html5 Web Worker!");	
				}				
			});
		</script>
	</head>
	<body>
		<div id="support"></div>
	</body>
</html>

onmessage=function(evt){
	var d=evt.data;
	postMessage(d);
}

worker是一个对象，通过构造函数Worker创建，参数就是一个js文件的路径；文件中的js代码将运行在主线程之外的worker线程；

var jsFileURI = JS_FILE_PATH;  // js文件路径

var worker = new Worker(jsFileURI);

worker运行在另一个全局上下文中（self），这个全局上下文不同于window，所以不能在woker中访问window和DOM；

该线程分为两种：dedicated worker和shared worker；dedicated worker只能被初始化它的js上下文中使用；shared worker可以在多个js上下文中使用。通常使用的worker是dedicated worker，它的工作情况可以通过chrome的调试工具查看。

视频课堂https://edu.csdn.net/combo/detail/802