js中的webworker学习

 WebWorker是H5中新增的API，我们使用这个API可以轻松的创建后台线程，webworker常用于执行那些耗费事件较长的逻辑计算或者大量循环，避免页面假死的发生。

webworker能为我们做什么：

1、加载一个JS文件，此文件用来进行大量计算，而不挂起主进程，通过postmessage，onmessage方法通信

2、使用importScript(url)加载其他的js文件

3、可以使用js的核心对象和部分浏览器属性

局限性：

1、不能跨域加载js   2、worker内不能访问dom，如需使用jquery，可加载jqnodom（

链接：

https://pan.baidu.com/s/1h-AC0PyM4EdXaZ68NPoCYw  提取码：0qou ）插件使用jquery调用  3、加载数据效率没有ajax高

使用：

创建线程

var worker=new Worker("test.js");
worker.postMessage("hello"); //想test.js线程发送hello
worker.onmessage=function(e){
    console.log(e.data);
}//接受子线程的数据并打印，e是事件对象。e.data是默认子线程传过来的数据

线程test.js

onmessage=function(e){
    var data=e.data;
    postMessage(data);//将主线程发过来的数据发回到主线程
}

使用起来很简单

worker+ajax配合使用：

使用情景：

1、当项目中有多个后台接口数据较大时，可以开启一个线程。

2、当需要点击某按钮后连接后台获取大量数据或开启websocket时，可以开启一个线程。

onmessage = function (event) {
              $.ajax({
				url:"http://192.168.xx.xxx/test/",
				type:"POST",
				data:yourdata,
				dataType:"text",
				success:function(data,textStatus){
					postMessage({
						type:"data",
						msg:data
					});//postMessage发送一个对象
				},
				error:function(XMLHttpRequest,textStatus,errorThrown){
					console.log("Error:"+textStatus);
				}
			});