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 - 用于临时保存同一窗口( ...
随机推荐
- xp看系统位数
运行cmd,看打开的cmd窗口标题一般c:\windows\system32代表32位操作系统,64位就是system64,详细系统信息运行命令“systeminfo”
- Jsp通过Filter实现UrlRewriter原理
web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app version=&quo ...
- pythonl练习笔记——python线程的GIL
python线程中的全局解释器锁GIL(Global Interpreter Lock) python-->支持多线程-->同步和互斥-->加锁-->解释器加锁-->解释 ...
- 《java设计模式》之责任链模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述责任链(Chain of Responsibility)模式的: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其 ...
- 于C#控制台传递参数和接收参数
前言: 写了这么久程序,今天才知道的一个基础知识点,就是程序入口 static void Main(string[] args) 里的args参数是什么意思 ?惭愧... 需求: 点击一个button ...
- Android-SQLiteOpenHelper
Android-SQLiteOpenHelper 一 概念 是对SOLiteDatabase的封装.主要用于建立和版本号控制,方便我们去建立库表结构 二 用法 又一次封装一个MySqliteOpenH ...
- 云从科技 OCR任务 pixel-anchor 方法
云从科技提出了一种端到端的深度学习文本检测框架Pixel-Anchor,通过特征共享的方式高效的把像素级别的图像语义分割和锚检测回归放入一个网络之中, 把像素分割结果转换为锚检测回归过程中的一种注意力 ...
- Leaf——美团点评分布式ID生成系统
背景 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识.如在美团点评的金融.支付.餐饮.酒店.猫眼电影等产品的系统中,数据日渐增长,对数据分库分表后需要有一个唯一ID来标识一条数据或消息,数 ...
- Socket网络编程 详细过程（转）
我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠so ...
- Vim下的插件管理工具pathogen简介
1.pathogen简介: 通常情况下安装vim插件是将所有的插件和相关的doc文件都安装在一个文件夹中,如$VIM/vim74/plugin目录下,文档在$VIM/vim74/doc目录下,但 ...