一、理解

当在 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. HUE配置文件hue.ini 的impala模块详解（图文详解）（分HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  2. hadoop-2.6.0.tar.gz的集群搭建（3节点）（不含zookeeper集群安装）

    前言 本人呕心沥血所写,经过好一段时间反复锤炼和整理修改.感谢所参考的博友们!同时,欢迎前来查阅赏脸的博友们收藏和转载,附上本人的链接http://www.cnblogs.com/zlslch/p/5 ...

  3. bash切割文件

    split -l 100 ./x01.txt -d -a 3 --additional-suffix=.txt 将 x01.txt文件,-l 100 按照每个100行,  -d 以数字累加, -a 3 ...

  4. PHP之mb_strripos使用

    mb_strripos (PHP 4 >= 4.0.6, PHP 5, PHP 7) mb_strrpos - Find position of last occurrence of a str ...

  5. Executors多线程

    介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...

  6. PTA (Advanced Level) 1010 Radix

    Radix Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? ...

  7. SAML 2.0 Profiles--wiki

    http://en.wikipedia.org/wiki/SAML_2.0#Web_Browser_SSO_Profile In SAML 2.0, as in SAML 1.1, the prima ...

  8. 学会了ES6，就不会写出那样的代码

    用let不用var ES6之前我们用var声明一个变量,但是它有很多弊病: 因为没有块级作用域,很容易声明全局变量 变量提升 可以重复声明 还记得这道面试题吗? var a = []; for (va ...

  9. Cannot find module 'rxjs/operators/share'

    描述: ionic项目,在使用了ngx-translate之后,项目编译完成,运行到浏览器时,出现如下错误: 其中ngx-translate参照官网最新教程使用,并且也尝试了angular4.3之前的 ...

  10. DataGridView 单元格自动填充

    在DataGridView单元格中,当输入指定字符时,自动完成填充. 通过 TextBox实现 AutoCompleteMode AutoCompleteMode.Suggest: AutoCompl ...