html5入门教程（五）web Worker-多线程

一般来说Javascript和页面的UI会共用一个线程，当一段Javascript代码运行完毕之前，此时的浏览器反映就是：鼠标变成忙碌状态，点击页面没有任何反映。
通过使用Web Worker，我们可以在浏览器后台运行Javascript，而不占用浏览器自身线程。Web Worker可以提高应用的总体性能，并且提升用户体验。

注意，多线程在IE6、7、8、9下均不支持

示例图

worker分为两个部分，在主页面创建worker对象，并发送到js文件上
然后js对接收到的内容做出相应，在发送到创建worker对象的页面上。

创建worker对象的页面：

<script type="text/javascript">
      var box=document.getElementById("box");
      var work=new Worker("work1.js"); //创建worker对象 记住这个W一定要写成大写
      work.postMessage("hello world"); //使用 postMessage()方法 发送内容
      work.addEventListener("message",function(ev){  //message事件用于监听返回的内容
             var event=ev||window.event;
             box.innerHTML=event.data; //这里面的event.data就代表得到的返回内容
      },false)
</script>

执行worker的js

addEventListener("message",function(ev){
     var event=ev||window.event;
     console.log(event.data);
     //event.data 是页面传过来的数据
     var str="小明说"+event.data;
     postMessage(str); //多线程页面得到内容以后 也需要用同样的方法 再返回给主页面
},false)

html5入门教程（五）web Worker-多线程

推荐阅读更多精彩内容