一、理解

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

webworker并没有改变js单线程的本质，webworker多线程指的是浏览器多线程，因为浏览器可以提供多个js引擎的实例，每个实例可以独立的运行相应的程序，但在每个js引擎实例中js脚本还是在单线程得执行，每个实例就相当于一个webworker。

所有主流浏览器都支持weworker，除了Internet explorer。

二、注意点

  1. webworker与主线程之间不能共享资源和作用域，通过异步事件在线程之间传递消息。

  2. webworker中不能访问window，document，parent对象，但是可以访问JSON（看到书上说applicationCache，navigator，location也可以访问，但实验了一下并不能访问，有知道怎么访问的还请指教啦）

  3. 同一个页面打开两次或者多次，创建webworker的路径是一样的，但是会创建不同的webworker，且是完全独立的。有些浏览器（Firefox，Chrome的高版本）支持共享Worker，通过 new ShareWorke来创建共享Worker实例

三、基本例子

//index.html

<body>

          <div id="num"></div>

          <input type="number" />

          <button>发送</button>

          <button>停止</button>

          <script>

              //子线程向主线程传递消息

              var w = new Worker("worker.js");

//            w.onmessage=function(e){//监听子线程的message事件

//                 document.getElementById("num").innerText =   JSON.parse(e.data).num;

//            }

              w.addEventListener("message",function (e){//监听子线程的message事件，既可以采用这种方式，也可以用上边注释里的方式

                  document.getElementById("num").innerText =  JSON.parse(e.data).num;

              })

                //主线程向子线程传递消息

              var btn =  document.getElementsByTagName("button")[0];

              btn.onclick = function () {

                   var num=  document.getElementsByTagName("input")[0].value;

                   w.postMessage(num);//向子线程发送message事件

              }

              var stopBtn =  document.getElementsByTagName("button")[1];

               stopBtn.onclick=function() {

                   w.terminate();//停止webworker

              }

          </script>

     </body>
 
//index.html

<body>

          <div id="num"></div>

          <input type="number" />

          <button>发送</button>

          <button>停止</button>

          <script>

              //子线程向主线程传递消息

              var w = new Worker("worker.js");

//            w.onmessage=function(e){//监听子线程的message事件

//                 document.getElementById("num").innerText =   JSON.parse(e.data).num;

//            }

              w.addEventListener("message",function (e){//监听子线程的message事件，既可以采用这种方式，也可以用上边注释里的方式

                  document.getElementById("num").innerText =  JSON.parse(e.data).num;

              })

                //主线程向子线程传递消息

              var btn =  document.getElementsByTagName("button")[0];

              btn.onclick = function () {

                   var num=  document.getElementsByTagName("input")[0].value;

                   w.postMessage(num);//向子线程发送message事件

              }

              var stopBtn =  document.getElementsByTagName("button")[1];

               stopBtn.onclick=function() {

                   w.terminate();//停止webworker

              }

          </script>

     </body>

从这个例子中可看出

  • 子线程内监听消息或者发送消息，直接调用addEventListener、postMessage即可

  • 主线程内监听消息或者发送消息，要调用Worker实例上的addEventListener、postMessage

  • 要想获得通信的实际内容，需要访问回调函数的参数中的data属性

  • webworker里可以使用JSON来传递复杂类型值

关于webWorker的理解和简单例子的更多相关文章

  1. Hibernate4.2.4入门(一)——环境搭建和简单例子

    一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...

  2. 一个简单例子：贫血模型or领域模型

    转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...

  3. [转] 3个学习Socket编程的简单例子：TCP Server/Client, Select

    以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...

  4. CANoe 入门 Step by step系列（三）简单例子的剖析【转】

    最好的学习方式是什么?模仿.有人会问,那不是山寨么?但是我认为,那是模仿的初级阶段,当把别人最好的设计已经融化到自己的血液里,变成自己的东西,而灵活运用的时候,才是真正高级阶段.正所谓画虎画皮难画骨. ...

  5. 【转载】CANoe 入门 Step by step系列（三）简单例子的剖析

    来源:http://www.cnblogs.com/dongdonghuihui/archive/2012/09/26/2704623.html 最好的学习方式是什么?模仿.有人会问,那不是山寨么?但 ...

  6. javascript javascript面向对象的理解及简单的示例

    javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...

  7. Spring框架系列(2) - Spring简单例子引入Spring要点

    上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...

  8. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答

    一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...

  9. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

随机推荐

  1. (转)CentOS 7 安装 Docker

    原文:http://www.cnblogs.com/stulzq/p/7743073.html http://www.cnblogs.com/stulzq/p/8629165.html-------- ...

  2. javascript004引用类型

    –掌握数组的概念.特性.常用方法(重点) –掌握Object,学会使用对象(重中之重) –了解其他引用类型对象 一:数组 •在ECMAScript中数组是非常常用的引用类型了.ECMAScript所定 ...

  3. Eclipse 安装spring插件spring tool suite(STS)

    安装方法有2种,一种是在线安装,比较方便,但耗时较长,一种是离线安装,步骤复杂一些,但耗时少,下面请看详细步骤. 方法一:在线安装     1:打开eclipse菜单Help>Eclise Ma ...

  4. 【数组】Two Sum

    题目: Given an array of integers, find two numbers such that they add up to a specific target number. ...

  5. ftp&nginx搭建图片服务器

    下面使用ftp+nginx搭建一个简单的服务器 ftp用于文件的传输 nginx提供http服务 nginx服务器的安装和配置可以参照之前的教程:nginx安装及其配置详细教程 下面介绍ftp服务的安 ...

  6. HDU 5444 Elven Postman （2015 ACM/ICPC Asia Regional Changchun Online）

    Elven Postman Elves are very peculiar creatures. As we all know, they can live for a very long time ...

  7. 如何在CentOS7上安装桌面环境？

    1.安装 GNOME-Desktop 安装GNOME桌面环境 # yum -y groups install "GNOME Desktop" 完成安装后,使用如下命令启动桌面 # ...

  8. oracle用plsql登陆出错,提示ORA-12170:TNS:链接超时 --------关闭防火墙试试

    oracle用plsql登陆出错,提示ORA-12170:TNS:链接超时 但是使用sqlplus可以连接 ping 本机127.0.0.1 显示一般故障 后关闭防火墙,问题解决. ps:登录时使用@ ...

  9. WINFORM如何实现无聚焦框的Button按钮

    当我们将一个button按钮设置如下属性时,总有一个聚焦框来困扰着我们 button1.FlatStyle = FlatStyle.Flat; 我们想要的效果是这样的: 但当使用了Tab切换焦点时 发 ...

  10. HTML5--(1)兼容前缀+结构性标签+语义化标签

    一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a)     -webkit- 兼容谷歌 b)     -m ...