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做它自己擅长的事吧。

时间: 2024-12-19 10:46:16

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

【HTML5】Web Workers

什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 计数器: <!DOCTYPE html> <html> <body> <p>计数: <output id="result"><

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

大纲: 主体: 稍后继续... ... . 原文地址:https://www.cnblogs.com/jianxian/p/11980375.html

Html5之高级-12 Web Workers(概述、 API)

一.Web Workers 概述 Web Workers 简介 - Web Workers 是运行在后台的 JavaScript - 充分利用多核 CPU 的优势 - 对多线程支持非常好 - 不会影响页面的性能 - 不能访问Web页面 和 DOM API 二.Web Workers API Web Workers API - 检测浏览器对 Web Worker 的支持性 - 创建 Web Worker 文件 - 创建 Web Worker 对象 - 与 Web Worker 进行通信 - onM

加速HTML5应用的九大方法-------4.使用 Web Workers

加速HTML5应用的九大方法-------4.使用 Web Workers Web Workers 是 HTML5 规范内容之一,用于提供后台脚本运行支持.相当于是多线程的处理环境.示例代码:var worker = new Worker('doWork.js');worker.addEventListener('message', function(e) {console.log('Worker said: ', e.data);}, false);worker.postMessage('He

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

一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使用最新的 Web 技术开发 Web 应用程序.这里的 大部分代码只是 HTML.JavaScript 和 CSS — 所有 Web 开发人员的核心技术.所需的最重要的工具是用于进行测试的浏览器.本文大部分代码将在最新桌面浏览器上运行,但也有一些例外,我们将在文章中进行说明.当然,您也必须在移动浏览器

html5 Web Workers.RP

虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaScript单线程可以看看setTimeout()和setInterval() 何时被调用执行),看个简单的例子证明一下 <!DOCTYPE html> <html> <head> <title>Web Workers</title> </head

HTML5中的Web Workers

https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 工作线程原理 传统上的线程可以解释为轻量级进程,它和进程一样拥有独立的执行控制,一般情况下由操作系统负责调度.而在 HTML5 中的多线程是这样一种机制,它允许在 Web 程序中并发执行多个 JavaScript 脚本,每个脚本执行流都称为一个线程,彼此间互相独立,并且由浏览器中的 JavaScri

HTML5 Web Workers

HTML5 web workers是运行在后台的JavaScript,不会影响页面的性能. 什么是web worker? 当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本运行完成. 而在HTML5 中的web worker是运行在后台的JavaScript,独立于其它的脚本,不会影响页面的性能.您可以继续做任何其它愿意做的事件,如:点击,选择内容等等, 而此时web worker是在后台运行的,所以不会影响页面的性能. 实例: <!DOCTYPE html><html>

HTML5新功能之八 《web works多线程》

一.什么是历史管理 HTML5新功能之七 <历史管理> HTML5新功能之八 <web works多线程>,布布扣,bubuko.com