HTML5新特性之多线程（Worker SharedWorker）的代码详解

百变鹏仔 2个月前 (10-18) #H5教程

文章标签之多

there is no doubt that javascript是没有多线程之说的，他只能一件事一件事的做，做完一件事再做下一件事，假如你的js要花一段比较长的时间做一件事的话，那么浏览器将会卡顿一段时间，不对用户的操作产生响应，这可咋办呢？谢天谢地，html5为我们提供了实现多线程的机制，这么好的东西，想必你早就再用了，不过没关系啊，咱们一块儿复习一下咯！

一、Worker类

1、方法介绍

（1）构造函数 new Worker(arg) :参数表示你的线程要执行的代码所在的js文件，例如‘myworker.js’,构造函数当然是返回一个Worker类的实例

（2）worker.postMessage(message):这个方法表示从主线程向子线程发送消息或者子线程向主线程发送消息，message一般是一个字符串，也可以将一个js对象转成字符串发过去

（3）worker上还有一个message事件，当有人向这个worker实例发送消息时，该事件被触发，我们可以从他的事件对象的data属性中获得post过来的值

立即学习“前端免费学习笔记（深入）”；

可以看到Woker类的API是相当简洁的，只有两个最常用的方法，一个事件，下面我们来通过实际的例子看看。

//main.html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>main</title></head><body>    <p id="out"></p>    <input type="text" name="" id="txt">    <button id="btn">发送</button>    <script type="text/javascript">        var out = document.getElementById("out");                var btn = document.getElementById("btn");                var txt = document.getElementById("txt");                var worker = new Worker("thread1.js");        btn.addEventListener("click",function(){                    var postData = txt.value;            worker.postMessage(postData);        },false);        worker.addEventListener(&#39;message&#39;,function(e){            out.innerText = e.data;        },false);    </script></body></html>

//thread1.jsonmessage = function(event){    var res = event.data+"帅气！";    postMessage(res);}

当我在文本框输入“大～熊”点击发送按钮就会出现如下效果

简单分析分析，我在主线程由thead1.js创建了一个Worker的实例worker，当点击按钮时会调用他的postMessage方法，将文本框中的内容发送到thread1.js，我们的thread1.js怎么做的呢？是这样，他侦听message事件，主线程发送消息过来就触发这个事件，执行回调函数，回调函数从事件对象取得发送来的值，然后将这个值加上“帅气！”,然后在发送回去。主线程呢也侦听了worker的message事件，所以有消息过去时会触发，将消息内容显示在p中，如此就看到了上面的效果。

或许你会将这有什么用呢？这里确实没什么用，这里我们大可以在主线程还总完成加“帅气！”的操作，因为他的复杂度为O(1)(哈哈，最近在学算法！)，但是假如不是做这么简单的操作呢？这种方法的好处就是不过你的子线程做多么复杂的工作，都不会让主线程停下来，主线程改干嘛还干嘛，等到子线程把数据处理好了他直接拿过来就好了。

陆老师将可以在子线程中在调用new Worker()创建新的子线程，我发现这样是不可以的，会报undefined错误，也就是说子线程中是不能调用Worker构造函数的，一开始以为是自己错了，后来查阅了官方文档，发现也没有相关的描述。

下面看一个在主线程调用多个子线程的例子：

//main.html<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>main</title></head><body>    <div id="out"></div>    <input type="text" name="" id="txt">    <button id="btn">发送</button>    <script type="text/javascript">        var out = document.getElementById("out");        var btn = document.getElementById("btn");        var txt = document.getElementById("txt");        var worker1 = new Worker("thread1.js");        var worker2 = new Worker("thread2.js");        btn.addEventListener("click",function(){            var postData = txt.value;            worker1.postMessage(postData);        },false);        worker1.addEventListener(&#39;message&#39;,function(e){            worker2.postMessage(e.data);                    },false);        worker2.addEventListener(&#39;message&#39;,function(e){            out.innerText = e.data;        },false);    </script></body></html>

//thread1.jsonmessage = function(event){    var res = event.data+"帅气！";        postMessage(res);    }

//thread2.jsonmessage = function(event){    var res = event.data+"没骗你哟！";    postMessage(res);    close();}

主线程要完成一个任务需要两个线程，它创建了两个线程worker1,2,先向worker1请求，得到返回的数据后，再请求worker2,同时将worker1处理之后的数据交给worder2处理，然后拿到最终结果，显示在页面上。

在子线程中可以引入其他的js文件然后调用，比如下边这个例子。

//main.html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>main</title></head><body>    <p id="out"></p>    <input type="text" name="" id="txt">    <button id="btn">发送</button>    <script type="text/javascript">        var out = document.getElementById("out");                var btn = document.getElementById("btn");                var txt = document.getElementById("txt");                var worker1 = new Worker("thread1.js");        btn.addEventListener("click",function(){                    var postData = txt.value;            worker1.postMessage(postData);        },false);        worker1.addEventListener(&#39;message&#39;,function(e){            out.innerText = e.data;                    },false);    </script></body></html>

//thread1.jsimportScripts(&#39;tools.js&#39;)onmessage = function(event){    var res = handler(event.data);        postMessage(res);    }

//tools.jsfunction handler(data){    return data+"加油加油！"}

可以看到我们的thread1.js并没有一个叫做tools.js的文件，但是它通过importScripts()导入了一个js文件，然后就可以调用里边暴露出来的方法了。

二、SharedWorker类

SharedWorker的实质在于share，不同的线程可以共享一个线程，他们的数据也是共享的。

直接用例子来探讨。

使用方法一：

//main.html<!DOCTYPE HTML><head>    <title>Shared workers: demo 1</title></head><body>    <p id="log"></p><script>  var worker = new SharedWorker(&#39;shared.js&#39;);    var log = document.getElementById(&#39;log&#39;);  worker.port.onmessage = function(e) {   // note: not worker.onmessage!      log.textContent += &#39;\n&#39; + e.data;  }</script></body></html>

//shared.jsonconnect = function(e) {  var port = e.ports[0];  port.postMessage(&#39;Hello World!&#39;);}

这是从w3c拿得一个例子，下面先看第二种方法，再做分析

<!DOCTYPE HTML><html><head>    <title>Shared workers: demo 2</title>    </head>    <body>    <p id="log"></p>    <script>  var worker = new SharedWorker(&#39;shared.js&#39;);    var log = document.getElementById(&#39;log&#39;);  worker.port.addEventListener(&#39;message&#39;, function(e) {    log.textContent += &#39;\n&#39; + e.data;  }, false);  worker.port.start(); // note: need this when using addEventListener    worker.port.postMessage(&#39;ping&#39;);</script>  </body></html>

//sharedonconnect = function(e) {  var port = e.ports[0];  port.postMessage(&#39;Hello World!&#39;);  port.onmessage = function(e) {    port.postMessage(&#39;pong&#39;); // not e.ports[0].postMessage!    // e.target.postMessage(&#39;pong&#39;); would work also  }}

第一种方法中是使用事件句柄的方式将听message事件，不需要调用worker.port.start(),第二种方法是通过addEventListener()方法监听message事件，需要worker.port.start()方法激活端口。他们不同于worker，当有人和他通信时触发connect事件，然后他的message事件是绑定在messagePort对象上的，不想worker那样，你可以回头看看worker是怎么做的。

那么sharedWorker是怎么共享数据的呢？请看下面的例子。

//main1 和main2都是这样<!DOCTYPE HTML><html><head>    <title>Shared workers: demo 2</title>    </head>    <body>    <p id="log"></p>    <input type="text" name="" id="txt">    <button id="get">get</button>    <button id="set">set</button>    <script>  var worker = new SharedWorker(&#39;shared.js&#39;);    var get = document.getElementById(&#39;get&#39;);    var set = document.getElementById(&#39;set&#39;);    var txt = document.getElementById(&#39;txt&#39;);    var log = document.getElementById(&#39;log&#39;);  worker.port.addEventListener(&#39;message&#39;, function(e) {    log.innerText = e.data;  }, false);  worker.port.start(); // note: need this when using addEventListener  set.addEventListener(&#39;click&#39;,function(e){      worker.port.postMessage(txt.value);  },false);  get.addEventListener(&#39;click&#39;,function(e){      worker.port.postMessage(&#39;get&#39;);  },false);</script></body></html>

//sharedvar data;onconnect = function(e) {  var port = e.ports[0];  port.onmessage = function(e) {        if(e.data==&#39;get&#39;){        port.postMessage(data);    }else{        data=e.data;    }  }}

这里分析一波，我们在main1.html的文本框输入数据，点击set，然后在main2.html中点击get法现能够获取到我们在main1.html中设置的数据，这说明我们的sharedWorker事实上是单例的，就像java中的static类一样，不管new多少个，实际上只有一个，这样我们的不同线程就可以共享到sharedWorker中的数据了。这里把图给上，记得有篇文章没给图，然后有人给我建议了，问能不能给图。

最后来小结一下，worker和sharedWorker没有什么悬糊的，就是把台前的工作搬到幕后去做，不打断台前的工作。正所谓台上十分钟，台下十年功，如果你把台下的十年供放到台上做，观众的唾沫星子早就把你淹死了，所以说那些费事费力的工作还是放到台下去，台上只用展示你最好的一面的好了，十分钟足以！　

文章推荐

HTML5新特性之多线程（Worker SharedWorker）的代码详解

一、Worker类

二、SharedWorker类

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集