Web Worker初识 #4

Web Worker的就是为JavaScript创造多线程环境,允许主线程将一些任务分配给子线程。在主线程运行的同时,子线程在后台运行,两者互不干扰。等到子线程完成计算任务,再把结果返回给主线程。因此,每一个子线程就好像一个“工人”(worker),默默地完成自己的工作。

Worker特点

同域限制:子线程加载的脚本文件,必须与主线程的脚本文件在同一个域。
DOM限制:子线程无法读限网页的DOM对象,即document、window、parent这些对象,子线程都无法得到。(但是,navigator对象和location对象可以获得。)
脚本限制:子线程无法读取网页的全局变量和函数,也不能执行alert和confirm方法,不过可以执行setInterval和setTimeout,以及使用XMLHttpRequest对象发出AJAX请求。
文件限制:子线程无法读取本地文件,即子线程无法打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

Worker作用域
当我们创建一个新的worker时,改代码会运行在一个全新的javascript的环境中(WorkerGlobalScope)运行,是完全和创建worker的脚本隔离,这时我们可以吧创建新worker的脚本叫做主线程,而被创建的新的worker叫做子线程。
WorkerGlobalScope是worker的全局对象,所以它包含所有核心javascript全局对象拥有的属性如JSON等,window的一些属性,也拥有类似于XMLHttpRequest()等。

但是我们所开启的新的worker也就是子线程,并不支持操作页面的DOM。

判断浏览器是否支持worker
if(window.Worker){ console.log("支持"); }else{ console.log("不支持"); }

这里举个例子发送和接受消息:
`

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<script id="worker" type="app/worker">

        addEventListener('message', function() {
            postMessage('Work done!');
        }, false);

    </script>
	<script type="text/javascript">
		if(window.Worker) {
			console.log("worker");
			var w = new Worker('worker_child.js');
			w.addEventListener('message', function(e) {
				console.log(e.data);
				w.postMessage('我收到了');
			}, false);
			//异常处理
			w.onerror = function(e){
			    console.log("error at "+e.filename ":" + e.lineno + e.message)
			}
			
			//worker.terminate();  结束线程
			// 支持
		} else {
			// 不支持
		}
	</script>

</body>

`

worker_child.js代码如下:
`
setInterval(function() {
self.postMessage({
‘msg’: “xiaobai”
});

}, 2000);

self.addEventListener(“message”,function(e){
console.log( e.data )
})`

会隔2秒打印‘xiaobai’ 发送信息到主线程 主线程接受并发送信息到子线程表示我收到了。

例外还有共享线程 SharedWorker,实用多个页面共享同一个worker,这里不再举例子.

参考链接:http://xiangzongliang.com/blogContent?b=82
https://www.cnblogs.com/jscode/p/3586567.html