一、理解

当在 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. service worker --- offline APP

    相关介绍: https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

  2. 【Guava】PreConditions来校验参数

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

  3. 第1章—Spring之旅—简化Spring的java开发

    简化Spring的java开发 1.1简介 区别于EJB的特性 简化javaBean,为了降低java开发的复杂性,Spring采取了以下4种关键策略: 基于POJO的轻量级和最小入侵性编程 通过依赖 ...

  4. 快捷键 -- windows

    win+数字 :   打开任务栏第n个图标 Win+D :快速显示桌面 Win+R :快速运行打开软件 例如 cmd services,msc Win+E:打开资源管理器 Win+L:快速锁定计算机 ...

  5. spring mongodb中去掉_class列

    调用mongoTemplate的save方法时, spring-data-mongodb的TypeConverter会自动给document添加一个_class属性, 值是你保存的类名. 这种设计并没 ...

  6. 介绍Windows Azure HDInsight服务的Hadoop Storm的视频

    介绍Windows Azure HDInsight服务的Hadoop Storm的原理,用例及开发入门的视频,收藏一下: http://channel9.msdn.com/Shows/Data-Exp ...

  7. jQuery插件开发之windowScroll

    回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也得向前迈进. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑, ...

  8. Python——爬虫学习2

    BeautifulSoup插件的使用 这个插件需要先使用pip安装(在上一篇中不再赘言),然后再程序中申明引用 from bs4 import BeautifulSoup html=self.requ ...

  9. 清空控件的TeXt属性

    foreach (Control item in groupBox1.Controls) { if (item is TextBox) //判断控件是不是TextBox { item.Text = & ...

  10. 解决Genymotion下载device时较慢的问题

    Genymotion添加device时,加载速度很慢: 简单方法处理如下: 1.首先找到如下目录文件名 打开后找到如下行,复制该地址直接使用迅雷等下载工具下载好该ova文件: 2.放置下载好的文件至对 ...