Html5之web workers多线程
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多线程的更多相关文章
- JS高阶---H5之Web Workers多线程
大纲: 主体: (1)介绍 (2)案例 编程实现斐波那契数列的计算 递归调用实现案例: Web Workers多线程的新标准并没有改变JS单线程的本质,分离出的子线程完全受主线程控制,且不得操作DOM ...
- 【HTML5】Web Workers
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...
- html5 Web Workers
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
- html5 Web Workers.RP
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
- HTML5中的Web Workers
https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...
- HTML5学习(十)---Web Workers
参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...
- HTML5 Web Workers来加速您的移动Web应用
一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...
- HTML5: HTML5 Web Workers
ylbtech-HTML5: HTML5 Web Workers 1.返回顶部 1. HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能 ...
- HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket
web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...
随机推荐
- 理解Lucene中的Query
Query是一个接口,它有很多实现类. QueryParser是Query解析器,用于将一个字符串解析为一个Query对象,这个Query对象可能属于TermQuery,也可能属于PhraseQuer ...
- 【LeetCode】150. Evaluate Reverse Polish Notation
Evaluate Reverse Polish Notation Evaluate the value of an arithmetic expression in Reverse Polish No ...
- JAXB注解使用[转]
一.Jaxb处理java对象和xml之间转换常用的annotation有: @XmlType @XmlElement @XmlRootElement @XmlAttribute @XmlAccesso ...
- Google Map 学习过程中的代码
<!DOCTYPE html><html> <head> <title>Simple click event</title> <met ...
- 什么是Asterisk，它如何帮助我们的呼叫中心?
如今的呼叫中心与过去的呼叫中心有很大差异.过去,一间房屋或一座大楼,装上硬接线的POTS电话,招聘几名员工就可以建立一个呼叫中心.如今,这样的情形已经一去不复返,因为有许多新技术让呼叫中心变得更像是一 ...
- C++11新特性（1） 右值引用
在C++中,左值(lvalue)是能够获取其地址的一个量.因为常常出如今赋值语句的左边.因此称之为左值.比如一个有名称的变量. 比如: int a=10; //a就是一个左值. 传统的C++引用,都是 ...
- CListCtrl获取列数
CListCtrl获取列数 // m_List是一个CListCtrl CHeaderCtrl* pHeaderCtrl = m_List.GetHeaderCtrl();if(pHeaderCtrl ...
- Python 元组 count() 方法
描述 Python 元组 count() 方法用于统计某个元素在元祖中出现的次数. 语法 count() 方法语法: T.count(obj) 参数 obj -- 元祖中统计的对象. 返回值 返回元素 ...
- YOLO 详解
YOLO核心思想:从R-CNN到Fast R-CNN一直采用的思路是proposal+分类 (proposal 提供位置信息, 分类提供类别信息)精度已经很高,但是速度还不行. YOLO提供了另一种更 ...
- php的安装
首先我们安装nginx #0.安装ningx(可选cd /disk1/toolsrpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/ngi ...