worker 理解

一、概述

JavaScript为单线程,worker则为JavaScript创建多线程环境。
使用场景如:计算文件hash,计算大于1G的文件hash过程是很慢的,但由于要将hash传给后端,所有需要在计算完成以后,再请求后端接口 fast_upload,请求 fast_upload 这个接口也要是同步的,因为若返回false,就需要正常上传文件。所有在同步计算hash,请求接口过程中,会导致页面严重卡顿,这个时候可以使用worker,在主线程之外创建一个线程,去进行这一系列动作,这个过程中,不影响页面其他操作。

二、使用:

1、主线程创建worker

var worker = new Worker('work.js'); 
 //new一个worker对象,参数是一个脚本文件,该文件必选是网络文件,因为worker不能读取本地文件

2、主线程调用worker.postMessage()方法,向 Worker 发消息。

worker.postMessage('qiao');
worker.postMessage({method: 'echo', args: ['Work']});

3、子线程通过message监听主线程传递的消息

self.addEventListener('message', function(data) {
	self.postMessage('Hey'+data);
}, false);

4、主线程接收子线程返回的数据

w.onmessage = function (data) {
	console.log(data)
}

5、关闭worker

worker.terminate();		//主线程关闭worker
self.close();				//子线程主动关闭worker

三、Worker 加载脚本

importScripts('/media/js/promise.min.js','/media/js/core.js','/media/js/sha1.js')

四、注意

  • 同源策略
  • 无法进行dom操作
  • Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
  • Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

五、参考:

Web Worker 使用教程

你可能感兴趣的:(总结,worker)