一、理解

当在 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. git stash使用一则

    当在新的分支工作,修改的文件提交到暂存区,这时,切换到其他分之,可能报错,因为米有commit,如果切换到其他分支,暂存区的修改可能丢失,我们可以使用git stash save -a(暂存区) &q ...

  2. 关于Input输入框蓝色外框的操作

    1.去掉input外框的css: input { outline : none; //去掉外框 //outline:medium; } input:focus { outline : none; } ...

  3. hadoop nameNode 无法启动

    /************************************************************STARTUP_MSG: Starting NameNodeSTARTUP_M ...

  4. 码表的理解(ASCII,GBK,Unicode,UTF-8等)。

    以下任何言论都完全是个人的理解,如有雷同纯属巧合,如有错误,希望大家多多指出,共同学习!谢谢! 笔者是一个理解能力偏慢.稍钻牛角尖的程序员,什么东西都要从最基础理解起,一步一步向上理解,因此讲述时也是 ...

  5. Betriebssystem

    1.Prozess 1.1 Das Begriff Der Prozess ist eine Entität der Aktivität,umfasst aktuell Aktivitäten,dur ...

  6. 每天一道leetcode141-环形链表

    考试结束,班级平均分只拿到了年级第二,班主任于是问道:大家都知道世界第一高峰珠穆朗玛峰,有人知道世界第二高峰是什么吗?正当班主任要继续发话,只听到角落默默想起来一个声音:”乔戈里峰” 前言 2018. ...

  7. IOS项目之弹出动画三

    前面写了弹出动画两个,今天做商城时又用到了,看着这个用着蛮普遍的,所以记了下来 // // mallMoreView.h // XQB // // Created by City--Online on ...

  8. python爬虫实战（七）--------伯乐在线文章（模版）

    相关代码已经修改调试成功----2017-4-21 一.说明 1.目标网址:伯乐在线 2.实现:如图字段的爬取 3.数据:存放在百度网盘,有需要的可以拿取 链接:http://pan.baidu.co ...

  9. ExtJs定时消息提示框，类似于QQ右下角提示，ExtJs如何定时向后台发出两个请求并刷新数据实例

    原文出自:https://blog.csdn.net/seesun2012 思路: 1.加载页面,加载Ext.TaskManager.start()方法: 2.执行定时器方法: 3.获取地址向后台发送 ...

  10. api拆分（数据传递和接收的几种方式）

    传递方式一:对象转String 接收:String类型接收再转对象 传递方式二:Map 接收:Map 传递方式三:json(Map转json) 接收:String转Map 传递方式四:Map里放jso ...