一、理解

当在 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. 【Guava】PreConditions来校验参数

    前置条件:让方法调用的前置条件判断更简单. 在我们的日常开发中,经常要对入参进行一定的参数校验,比如是否为空,参数的取值范围是否符合要求等等.这种参数校验如果我们单独进行校验的话,代码的重复率比较高, ...

  2. com.alibaba.dubbo.rpc.RpcException: Failed to invoke remote method解决方法

    报错日记: Caused by: com.alibaba.dubbo.rpc.RpcException: Failed to invoke remote method: getUserAuthLeve ...

  3. 【Qt开发】StyleSheet使用总结

    概述 转眼七年过去了,我是一个彻底拥抱过MFC的人,记得老大的一个需求要把按钮做成圆角,并添加背景颜色,做前端html的可能认为很简单,然而放到MFC上那可真的是很...很麻烦的,自定义类继承Butt ...

  4. [Mysql 查询语句]——查询指定记录

    #比较 等于; 大于; 小于; 小于或等于; 大于或等于; 不等于; 排除掉; #指定范围查询 BETWEEN IN ; ; #指定集合查询 IN ,); ,); 集合元素可以是字符串类型 selec ...

  5. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  6. vs2015 点击cshtml 后提示 "无效指针" 的解决办法

    1. 关闭vs 2. 删除 %LocalAppData%\Microsoft\VisualStudio\14.0\ComponentModelCache 3. 打开vs OK 解决

  7. guava快速入门（三）

    Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives support] ...

  8. 如鹏网学习笔记（八）CSS

    CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性 ...

  9. js只允许输入数字和两位小数

    一.js只允许输入数字和两位小数 //只允许输入数字和两位小数 function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, ...

  10. 动态页面技术之JSP

    1.什么是JSP技术 JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起 ...