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> <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 worker = new Worker("thread1.js"); btn.addEventListener("click",function(){ var postData = txt.value; worker.postMessage(postData); },false); worker.addEventListener('message',function(e){ out.innerText = e.data; },false); </script> </body> </html> //thread1.js onmessage = function(event){ var res = event.data+"帅气！"; postMessage(res); } |
当我在文本框输入“大～熊”点击发送按钮就会出现如下效果
简单分析分析，我在主线程由thead1.js创建了一个Worker的实例worker，当点击按钮时会调用他的postMessage方法，将文本框中的内容发送到thread1.js，我们的thread1.js怎么做的呢？是这样，他侦听message事件，主线程发送消息过来就触发这个事件，执行回调函数，回调函数从事件对象取得发送来的值，然后将这个值加上“帅气！”,然后在发送回去。主线程呢也侦听了worker的message事件，所以有消息过去时会触发，将消息内容显示在div中，如此就看到了上面的效果。
