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);
                }
            });