Web Workers 是 HTML5 提供的一个javascript多线程解决方式，我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面。

1、首先看一个实例：

1）js文件(test.js)

var fibonacci =function(n) {

    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);

};

onmessage =function(event) {

    var n = parseInt(event.data, 10);

    postMessage(fibonacci(n));

};

2）html页面（test.html）

<html>

<script type="text/javascript">

var worker =new Worker('test.js');

worker.onmessage =function(evt){

	alert(evt.data);

}

 function onload() {

	 worker.postMessage(40);

 }

 onload();

</script>

<body>

sfsdfdsfdsfdfdsf

<input type="text" value="abc"></input>

<div id="test">

</div>

</body>

</html>

注意：

1.上面的样例最好放到server上执行。(chrome不支持本地的)

2.上面的样例能够发现，页面会先渲染body中的html内容，在子线程中去运行负责的计算。等子线程计算完成后把结果传递给主线程。

假设不使用web workers，直接把计算部分放到主线程中，那么浏览器处于单线程中，会顺序运行，导致以下的页面无法载入。

2、web workers流程：

WEB主线程:

1.通过 worker = new Worker( url ) 载入一个JS文件来创建一个worker，同一时候返回一个worker实例。

2.通过worker.postMessage( data ) 方法来向worker发送数据。

3.绑定worker.onmessage方法来接收worker发送过来的数据。

4.能够使用 worker.terminate() 来终止一个worker的运行。

worker新线程：

1.通过postMessage( data ) 方法来向主线程发送数据。

2.绑定onmessage方法来接收主线程发送过来的数据。

3、web workers知识点：

1.worker.onmessage

绑定主线程的message事件。当worker调用postMessage时方法时。绑定的事件处理程序会被调用到，传递来的数据能够使用MouseEvent的data属性获取，通过target属性还能够获取worker对象

2.self是什么

self是woker中对自身的引用。有些像this

3.close()

在worker内部调用close()方法效果和在外部调用worker实例的terminate()方法效果一样。终止worker执行

4.onmessage

在这个句柄内接收外部调用者传递的參数，參数能够通过e.data获取

5.self.postMessage()

没错通过这种方法我们能够在worker内把结果传递给主线程。主线程上绑定的message事件的处理程序会被调。

6.全新的JavaScript环境

当一个Worker实例被创建的时候，它会在一个全新的JavaScript执行环境中，全然和创建worker的脚本分离开。即使我们传递的消息是引用类型它们也是复制传递的，改动worker中的參数不影响创建脚本中的參数。

7.importScripts()

我们能够通过importScripts()方法通过url在worker中载入库函数，例如以下：

importScripts('utility/dialog.js','common/cookie.js');

方法能够接受多个url。相对地址的url以当前worker为參照，方法会依照參数顺序依次下载执行库函数，假设中间某个脚本出错，剩下的都不会被载入和执行，并且这种方法是同步的，仅仅有全部脚本都载入、执行完后才会返回。

注：importScripts方法能够载入跨域的文件。使用worker的构造函数时的js文件仅仅能是同源的。

8.worker运行模型

worker线程从上到下同步执行它的代码。然后进入异步阶段来对事件及计时器响应。假设worker注冊了message事件处理程序，仅仅要其有可能触发，worker就一直在内存中，不会退出，但假设worker没有监听消息。那么当全部任务执行完成（包含计数器）后，他就会退出。

9.web worker中能够使用什么

 1)self自身引用

 2)能够使用JavaScript的全局对象：JSON、Date()、Array

 3)location对象，可是其属性都是仅仅读的。改了也影响不到调用者

 4)navigator对象

 5)setTimeout()、setInterval()及其相应清除方法

 6)addEventListener()、removeEventListener()

 7)最后web worker还支持sub worker和共享worker，这方面没有太细致看，浏览器兼容性也不讨理想，有兴趣同学能够上网搜索研究一下。

10.web worker 弱点：

 1)在worker中不能使用window对象和docuemnt对象（dom对象），即：不能在主、子线程中共享dom操作。

 2)不能跨域载入work的js(在使用work的构造方法时)

 3)web worker仅仅能用来载入同域下的json数据，而这方面ajax已经能够做到了，并且效率更高更通用。

还是让Worker做它自己擅长的事吧。

Html5之web workers多线程的更多相关文章

  1. JS高阶---H5之Web Workers多线程

    大纲: 主体: (1)介绍 (2)案例 编程实现斐波那契数列的计算 递归调用实现案例: Web Workers多线程的新标准并没有改变JS单线程的本质,分离出的子线程完全受主线程控制,且不得操作DOM ...

  2. 【HTML5】Web Workers

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  3. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  4. html5 Web Workers.RP

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  5. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  6. HTML5学习(十)---Web Workers

    参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...

  7. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

  8. HTML5: HTML5 Web Workers

    ylbtech-HTML5: HTML5 Web Workers 1.返回顶部 1. HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能 ...

  9. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

随机推荐

  1. 学习JUnit

    一.为什么测试很重要? 塑造系统的设计.我们知道输入和输出应该是什么样的,但是我们需要创建什么对象来做到这一点呢?代码应该塑造成什么样的"形状"?编写测试可以让我们知道应该创建什么 ...

  2. java MessageFormat.format

    sql 语句中格式化,如果加入{}占位符,要替代的是整形变量,而恰好这个整形变量的位数超过4位, MessageFormat.format 会在这个整形变量中默认每隔三位加一个逗号,类似这样:1000 ...

  3. iOS - Label 数字动态变化

    1.数字动态变化 具体实现代码见 GitHub 源码 QExtension QCountingLabel.h /// 文本数字变化方式枚举 typedef NS_ENUM(NSUInteger, QC ...

  4. 一种时间复杂度为O（n）的排序方法(转载)

    原文地址:http://my.oschina.net/u/158457/blog/28536 排序的方法很特别,有点类似插入排序的味道 先看下代码 public class Sort { privat ...

  5. python添加tab键自动补全功能

    默认python是没有tab键补全功能的: >>> import tab Traceback (most recent call last): File "<stdi ...

  6. 利用ARP和ICMP协议解释ping命令

    一.MTU 以太网和IEEE 802.3对数据帧的长度都有限制,其最大值分别是1500和1492字节,将这个限制称作最大传输单元(MTU,Maximum Transmission Unit).如果IP ...

  7. RCU介绍

    RCU原理: RCU(Read-Copy Update),顾名思义就是读-拷贝修改,它是基于其原理命名的.对于被RCU保护的共享数据结构,读者不需要获得任何锁就可以访问它,但写者在访问它时首先拷贝一个 ...

  8. malloc的内存分配原理

    0 堆内存的在计算机内存中的形式 根据<The C Programming language>推测得到堆内存,图中的Heap区域即为堆内存块(Heap区域的数目不代表计算机堆内存的真实数目 ...

  9. 获取Android运行apk的packagename 和activityname

    自动化测试中经常遇到这个问题,关于这个题目,方法众多,咱的目的是找个比较简单靠谱的: 方法一: 先进入cmd窗口,adb shell 后: cd /data/data ls 可以看到包名了吧,缺点很明 ...

  10. Model層資料驗證

    概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验证. 本节我们就学习如何使用 System.Co ...