伊始应用Web,Worker异步执行及有关概述

始于应用Web Workers

2012/11/28 · HTML5,
JavaScript · 来源:
伯乐在线     ·
HTML5,
Javascript

英文原稿:tutsplus,编译:伯乐在线
– 胡蓉(@蓉Flora)

单线程(Single-threaded)运行是JavaScript语言的安顿性目的之一,进而言之是维持JavaScript的简要。不过本人不可能不要说,即使JavaScript具有那样语言特质,但它不用不难!大家所说的“单线程”是指JavaScript只有一个线程控制。是的,这一点令人心寒,JavaScript引擎五回只好做一件事。

“web workers处在一个严酷的无DOM访问的环境里,因为DOM是非线程安全的。”

现行,你是否认为要想使用下你机器闲置的多核处理器太受限制?不用操心,HTML5将转移那整个。

JavaScript的单线程形式

有学派认为JavaScript的单线程特质是一种简化,可是也有人觉得那是一种限制。后者提议的是一个很好的见识,尤其是当今web应用程序多量的施用JavaScript来拍卖界面事件、轮询服务端接口、处理大量的数据以及依据服务端的响应操作DOM。

在维护响应式界面的同时,通过单线程控制处理那样多事件是项辛苦的义务。它迫使开发人士不得不信赖一些技巧或选取浮动的方法(如采用set提姆eout(),setInterval(),或调用XMLHttpRequest和DOM事件)来落到实处产出。但是,即使那个技能肯定地提供了缓解异步调用的点子,但非阻塞的并不意味着是出新的。JohnResig在她的博客中表达了怎么不可以相互运行。

限制

设若您早就和JavaScript打过一段时间的交际,那么你势必也饱尝过如下令人讨厌的对话框,提示您有脚本无响应。没错,大约大多数的页面无响应都是由JavaScript代码引起的。

亚洲必赢官网 1

以下是有些周转脚本时造成浏览器无响应的原因:

  • 过多的DOM操作:DOM操作可能是在JavaScript运行中代价最高的。所以,多量的DOM操作无疑是您代码重构的极品方向之一。
  • 无终止循环:审视你代码中复杂的嵌套循环永远不是帮倒忙。复杂的嵌套循环所做的劳作平时比其实须要做的多很多,也许你可以找到其他格局来促成平等的效果。
  • 与此同时富含以上两种:最坏的图景就是肯定有更优雅的不二法门,却照旧在循环中不断更新DOM元素,比如可以使用DocumentFragment。

 

点评:HTML5 中的 Web Worker 可以分为二种分化线程类型,一个是专用线程
Dedicated Worker,一个是共享线程 Shared
Worker。二种档次的线程各有不一样的用处,感兴趣的情人可以明白下啊,或许对您所有协助

Javascript执行机制       在HTML5此前,浏览器中JavaScript的运作都是以单线程的艺术行事的,就算有多种措施贯彻了对二十四线程的模仿(例如:Javascript
中的 setinterval 方法,set提姆eout
方法等),不过在真相上先后的运行如故是由 JavaScript
引擎以单线程调度的法子进行的。在 HTML5 中引入的做事线程使得浏览器端的
Javascript 引擎可以并发地执行 Javascript
代码,从而完毕了对浏览器端多线程编程的大好支持。

Javascript执行机制      
在HTML5从前,浏览器中JavaScript的运作都是以单线程的点子行事的,就算有多种办法达成了对多线程的模仿(例如:Javascript
中的 setinterval 方法,set提姆eout
方法等),不过在精神上先后的运作照旧是由 JavaScript
引擎以单线程调度的措施展开的。在 HTML5 中引入的干活线程使得浏览器端的
Javascript 引擎可以并发地执行 Javascript
代码,从而完结了对浏览器端四线程编程的地道援救。

好帮手Web Workers

幸好有了HTML5和Web
Workers,你可以真正生成一条异步的线程。当主线程处理界面事件时,新的worker可以在后台运行,它甚至足以强大的拍卖大量的数量。例如,一个worker可以处理大型的数据结构(如JSON),从中提取变量新闻然后在界面中浮现。好了,废话不多说,让大家看有些其实的代码吧。

 

开创一个Worker

平凡,与web
worker相关的代码都放在一个单身的JavaScript文件中。父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创立一个新的worker,它会异步加载并实施那个JavaScript文件。

JavaScript

var primeWorker = new Worker(‘prime.js’);

1
var primeWorker = new Worker(‘prime.js’);

 

启动Worker

要启动一个Worker,则父线程向worker传递一个信息,如下所示:

JavaScript

var current = $(‘#prime’).attr(‘value’);
primeWorker.postMessage(current);

1
2
var current = $(‘#prime’).attr(‘value’);
primeWorker.postMessage(current);

父页面可以由此postMessage接口与worker举行通讯,那也是跨源通讯(cross-origin
messaging)的一种办法。通过postMessage接口除了可以向worker传递私有数据类型,它还协理JSON数据结构。不过,你不可以传递函数,因为函数也许会蕴藏对秘密DOM的引用。

“父线程和worker线程有它们分别的独自空间,新闻根本是过往交流而不是共享。”

消息在后台运行时,先在worker端连串化,然后在接收端反序列化。鉴于此,不推荐向worker发送多量的数据。

父线程同样可以声美素佳儿个回调函数,来侦听worker已毕职分后发回的音讯。这样,父线程就足以在worker完结职责后使用些要求的行动,比如更新DOM元素。如下代码所示:

JavaScript

primeWorker.addEventListener(‘message’, function(event){
console.log(‘Receiving from Worker: ‘+event.data); $(‘#prime’).html(
event.data ); });

1
2
3
4
primeWorker.addEventListener(‘message’, function(event){
    console.log(‘Receiving from Worker: ‘+event.data);
    $(‘#prime’).html( event.data );
});

event对象涵盖八个至关首要性质:

  • target:用来针对发送音信的worker,在多元worker环境下比较有用。
  • data:由worker发回给父线程的数码。

worker本身是富含在prime.js文件中的,它同时侦听message事件,从父线程中吸纳音讯。它一律通过postMessage接口与父线程举办通讯。

JavaScript

self.addEventListener(‘message’, function(event){ var currPrime =
event.data, nextPrime; setInterval( function(){ nextPrime =
getNextPrime(currPrime); postMessage(nextPrime); currPrime = nextPrime;
}, 500); });

1
2
3
4
5
6
7
8
self.addEventListener(‘message’,  function(event){
    var currPrime = event.data, nextPrime;
    setInterval( function(){
    nextPrime = getNextPrime(currPrime);
    postMessage(nextPrime);
    currPrime = nextPrime;
    }, 500);
});

在本文例子中,我们探寻下一个最大的质数,然后不断将结果发回至父线程,同时不断更新界面以展示新的值。在worker的代码中,字段self和this都是指向全局功能域。Worker既可以拉长事件侦听器来侦听message事件,也得以定义一个onmessage处理器,来选择从父线程发回的新闻。

追寻下一个质数的事例鲜明不是worker的精粹用例,不过在此选取那一个例子是为了求证信息传递的规律。之后,大家会发掘些可以经过web
worker得到利益的实在用例。

 

终止Workers

worker属于占用资源密集型,它们属于系统层面的线程。由此,你应当不希望创设太多的worker线程,所以你需求在它落成任务后甘休它。Worker可以经过如下形式由友好终止:

JavaScript

self.close();

1
self.close();

或者,由父线程终止。

JavaScript

primeWorker.terminate();

1
primeWorker.terminate();

 

安然与限定

在worker的代码中,不要访问片段主要的JavaScript对象,如document、window、console、parent,更紧要的是无须访问DOM对象。也许并非DOM元素以至不可以更新页面元素听上去有点严厉,不过那是一个重点的平安规划决定。

设想一下,倘诺过四线程都试着去革新同一个因素那就是个不幸。所以,web
worker必要处在一个严苛的并线程安全的环境中。

正如往日所说,你可以透过worker处理多少,并将结果再次来到主线程,进而更新DOM元素。即使它们无法访问片段重点的JavaScript对象,不过它们得以调用一些函数,如set提姆(Tim)eout()/clear提姆(Tim)eout()、setInterval()/clearInterval()、navigator等等,也能够访问XMLHttpRequest和localStorge对象。

 

同源限制

为了能和服务器交互,worker必须信守同源策略(same-origin policy)(译注:可参照国人小说同源策略)。比如,位于

 

谷歌 Chrome与当地访问

GoogleChrome对worker本地访问做了限定,由此你无法本地运行那一个事例。即使你又想用Chrome,那么您可以将文件放到服务器上,或者在通过命令启动Chrome时添加–allow-file-access-from-files。例如,苹果系统下:

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
–allow-file-access-from-files

然则,在实际产品生产进度中,此措施并不推荐。最好或者将您的公文上传至服务器中,同时拓展跨浏览器测试。

 

Worker调试和错误处理

不可能访问console如同不怎么不便利,但正是有了Chrome开发者工具,你能够像调试其余JavaScript代码那样调试worker。

亚洲必赢官网 2

为处理web
worker抛出的尤其,你能够侦听error事件,它属于Error伊夫(Eve)nt对象。检测该目的从中精晓引起错误的详细新闻。

JavaScript

primeWorker.addEventListener(‘error’, function(error){ console.log(‘
Error Caused by worker: ‘+error.filename + ‘ at line number:
‘+error.lineno + ‘ Detailed Message: ‘+error.message); });

1
2
3
4
5
primeWorker.addEventListener(‘error’, function(error){
    console.log(‘ Error Caused by worker: ‘+error.filename
        + ‘ at line number: ‘+error.lineno
        + ‘ Detailed Message: ‘+error.message);
});

多个Worker线程

即使创造三个worker来协调任务分配也许很常见,但要么要提醒一下各位,官方正规提出worker属于相对重量级并能长期运行在后台的本子。所以,由于Web
worker的高启动性能开支和高进程内存开支,它们的数据不宜过多。

 

简不难单介绍共享workers

合法正式提出有二种worker:专用线程(dedicated worker)和共享线程(shared
worker)。到方今甘休,大家只列举了专用线程的事例。专用线程与创设线程的台本或页面平素关联,即具有卓越的互换。而共享线程允许线程在同源中的多个页面间举办共享,例如:同源中拥有页面或脚本可以与同一个共享线程通讯。

“创立一个共享线程,间接将脚本的URL或worker的名字传入SharedWorker构造函数”

二者最根本的分别在于,共享worker与端口相关联,以担保父脚本或页面可以访问。如下代码创设了一个共享worker,并声称了一个回调函数以侦听worker发回的音讯,同时向共享worker传输一条音信。

JavaScript

var sharedWorker = new SharedWorker(‘findPrime.js’);
sharedWorker.port.onmessage = function(event){ … }
sharedWorker.port.postMessage(‘data you want to send’);

1
2
3
4
5
var sharedWorker = new SharedWorker(‘findPrime.js’);
sharedWorker.port.onmessage = function(event){
    …
}
sharedWorker.port.postMessage(‘data you want to send’);

同样,worker可以侦听connect事件,当有客户端想与worker进行连接时会相应地向其发送信息。

JavaScript

onconnect = function(event) { // event.source包罗对客户端端口的引用 var
clientPort = event.source; // 侦听该客户端发来的消息clientPort.onmessage = function(event) { //
event.data包含客户端发来的音讯 var data = event.data; …. //
处理完了后爆发新闻 clientPort.postMessage(‘processed data’); } };

1
2
3
4
5
6
7
8
9
10
11
12
onconnect = function(event) {
    // event.source包含对客户端端口的引用
    var clientPort = event.source;
    // 侦听该客户端发来的消息
    clientPort.onmessage = function(event) {
        // event.data包含客户端发来的消息
        var data = event.data;
        ….
        // 处理完成后发出消息
        clientPort.postMessage(‘processed data’);
    }
};

鉴于它们持有共享的特性,你可以保险一个应用程序在差距窗口内的一样状态,并且分裂窗口的页面通过同一共享worker脚本保持和报告景况。想更加多的摸底共享worker,我提出你读书合法文档。

 

骨子里行使场景

worker的实际上发生景况可能是,你需要处理一个共同的第三方接口,于是主线程需求等待结果再展开下一步操作。那种气象下,你可以生成一个worker,由它代理,异步落成此职分。

Web
worker在轮询景况下也至极适用,你可以在后台不断询问目的,并在有新数据时向主线程发送音信。

你可能遭逢须求向服务端重临大量的数量的情状。常常,处理大批量数据会黯然影响程序的响应能力,然后导致不良用户体验。更优雅的章程是将拍卖工作分配给多少worker,由它们处理不重叠的多少。

再有使用场景会现出在经过五个web
worker分析音频或录像的发源,每个worker针对专项问题。

 

结论

乘势HTML5的拓展,web worker规范也会频频进入。若是你打算采纳web
worker,看一看它的官方文档不是坏事。

专项线程的跨浏览器扶助此时此刻还不易,Chrome,Safari和Firefox方今的本子都支持,甚至IE这一次都未曾落后太多,IE10依旧正确的。可是共享线程唯有当前版本的Chrome和Safari帮衬。其余奇怪的某些是,Android
2.1的浏览器援助web worker,反而4.0版本不接济。苹果也从iOS 5.0早先接济web
worker。

设想一下,在原来单线程环境下,八线程会带来无限可能啊~

 

译注:本身对此JavaScript技术世界并不是专程熟练,如有误翻的地方,请大家立马批评指正,我将随即修改!!!最终,推荐两篇有关国人可以小说

《HTML5 web worker的使用 》

《深切HTML5 Web
Worker应用实践:三十二线程编程》

 

 

英文原稿:tutsplus,编译:伯乐在线
– 胡蓉(@蓉Flora)

作品链接:

【如需转发,请在正文中标注并保留原文链接、译文链接和翻译等新闻,谢谢协作!】

 

赞 1 收藏
评论

Javascript执行机制
在HTML5往日,浏览器中JavaScript的运作都是以单线程的法子行事的,即使有多种方法实现了对四线程的效仿(例如:Javascript
中的 setinterval 方法,set提姆eout
方法等),可是在精神上先后的周转如故是由 JavaScript
引擎以单线程调度的艺术展开的。在 HTML5 中引入的做事线程使得浏览器端的
Javascript 引擎可以并发地执行 Javascript
代码,从而完毕了对浏览器端四线程编程的上佳支持。

Javascript中的多线程 –
WebWorker
      HTML5 中的 Web Worker 可以分为两种差距线程类型,一个是专用线程
Dedicated Worker,一个是共享线程 Shared
Worker。两连串型的线程各有分裂的用途。

Javascript中的多线程 – WebWorker       HTML5 中的 Web Worker 可以分成二种分化线程类型,一个是专用线程
Dedicated Worker,一个是共享线程 Shared
Worker。三种档次的线程各有分裂的用途。

至于小编:胡蓉

亚洲必赢官网 3

胡蓉:某互联网商家竞相设计师。在如此一个梦想者云集的互联网乐土中,用心培养着属于自己的那一片天地。做团结热爱的,然后径直坚持不渝下去~(网易网易:@蓉福罗拉(Flora))

个人主页 ·
我的文章

亚洲必赢官网 4

Javascript中的十六线程 – WebWorker HTML5 中的 Web Worker 可以分为二种不相同线程类型,一个是专用线程
Dedicated Worker,一个是共享线程 Shared
Worker。两系列型的线程各有分化的用途。
专用型web worker
专用型worker与创设它的本子连接在一块,它可以与任何的worker或是浏览器组件通讯,可是她不可以与DOM通信。专用的意义,我想就是其一线程四回只处理一个需要。专用线程在除了IE外的种种主流浏览器中都落成了,可以放心使用。
开创线程
创制worker很粗略,只要把须要在线程中实施的JavaScript文件的文书名传给构造函数就足以了。
线程通讯
在主线程与子线程间举办通讯,使用的是线程对象的postMessage和onmessage方法。不管是什么人向什么人发多少,发送发使用的都是postMessage方法,接收方都是应用onmessage方法接收数据。postMessage唯有一个参数,那就是传递的数码,onmessage也唯有一个参数,借使为event,则通过event.data获取收到的数额。
发送JSON数据
JSON是JS原生支持的事物,不用白不用,复杂的数目就用JSON传送吧。例如:

专用型web worker

专用型web worker

代码如下:

  专用型worker与创制它的剧本连接在一块,它可以与任何的worker或是浏览器组件通信,不过她不可以与DOM通信。专用的意义,就是这些线程四回只处理一个须求。专用线程在除了IE外的种种主流浏览器中都兑现了,可以放心使用。
开创线程
      制造worker很简短,只要把须求在线程中实施的JavaScript文件的公文名传给构造函数就可以了。

  专用型worker与成立它的台本连接在联合,它可以与别的的worker或是浏览器组件通信,然而他不可能与DOM通讯。专用的含义,我想就是那几个线程两回只处理一个需求。专用线程在除了IE外的各样主流浏览器中都完毕了,能够放心使用。
创建线程      
创造worker很粗略,只要把须要在线程中实践的JavaScript文件的文本名传给构造函数就可以了。

postMessage({‘cmd’: ‘init’, ‘timestamp’: Date.now()});

线程通讯
      在主线程与子线程间举行通讯,使用的是线程对象的postMessage和onmessage方法。不管是何人向何人发多少,发送发使用的都是postMessage方法,接收方都是利用onmessage方法接收数据。postMessage唯有一个参数,那就是传递的多少,onmessage也唯有一个参数,假设为event,则经过event.data获取收到的多寡。

线程通讯
     
在主线程与子线程间举办通讯,使用的是线程对象的postMessage和onmessage方法。不管是哪个人向哪个人发多少,发送发使用的都是postMessage方法,接收方都是应用onmessage方法接收数据。postMessage唯有一个参数,那就是传递的数码,onmessage也唯有一个参数,假若为event,则透过event.data获取收到的多少。

处理错误
当线程发生错误的时候,它的onerror事件回调会被调用。所以处理错误的办法很简单,就是挂接线程实例的onerror事件。那些回调函数有一个参数error,这一个参数有3个字段:message

发送JSON数据
      JSON是JS原生匡助的东西,不用白不用,复杂的数额就用JSON传送吧。例如:

发送JSON数据      
JSON是JS原生协理的东西,不用白不用,复杂的数量就用JSON传送吧。例如:

  • 不当消息;filename – 发生错误的本子文件;lineno – 发生错误的行。
    销毁线程
    在线程内部,使用close方法线程自己销毁自己。在线程外部的主线程中,使用线程实例的terminate方法销毁线程。
    上边从一个例子看线程的基本操作:
    HTML代码:

postMessage({‘cmd’: ‘init’, ‘timestamp’: Date.now()});

postMessage({‘cmd’: ‘init’, ‘timestamp’: Date.now()});

代码如下:

处理错误
      当线程爆发错误的时候,它的onerror事件回调会被调用。所以处理错误的不二法门很粗略,就是挂接线程实例的onerror事件。这一个回调函数有一个参数error,那个参数有3个字段:message

处理错误      
当线程暴发错误的时候,它的onerror事件回调会被调用。所以处理错误的措施很粗略,就是挂接线程实例的onerror事件。那么些回调函数有一个参数error,这些参数有3个字段:message

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>web worker fibonacci</title>
<script type=”text/javascript”>
onload = function(){
var worker = new Worker(‘fibonacci.js’);
worker.onmessage = function(event) {
console.log(“Result:” + event.data);
};
worker.onerror = function(error) {
console.log(“Error:” + error.message);
};
worker.postMessage(40);
}
伊始应用Web,Worker异步执行及有关概述。</script>
</head>
<body>
</body>
</html>

  • 错误音信;filename – 发生错误的台本文件;lineno – 爆发错误的行。
  • 荒谬信息;filename – 暴发错误的台本文件;lineno – 发生错误的行。

本子文件fibonacci.js代码:

销毁线程
      在线程内部,使用close方法线程自己销毁自己。在线程外部的主线程中,使用线程实例的terminate方法销毁线程。

销毁线程      
在线程内部,使用close方法线程自己销毁自己。在线程外部的主线程中,使用线程实例的terminate方法销毁线程。

代码如下:

HTML代码:

上面从一个例证看线程的基本操作:
HTML代码:

//fibonacci.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));
};

<script type=”text/javascript”>
  onload = function(){
      var worker = new Worker(‘fibonacci.js’);  
      worker.onmessage = function(event) {
        console.log(“Result:” + event.data);
      };
      worker.onerror = function(error) {
        console.log(“Error:” + error.message);
      };
      worker.postMessage(40);
  }  
  </script>
本子文件fibonacci.js代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>web worker fibonacci</title>
<script type=”text/javascript”>
  onload = function(){
      var worker = new Worker(‘fibonacci.js’);  
      worker.onmessage = function(event) {
        console.log(“Result:” + event.data);
      };
      worker.onerror = function(error) {
        console.log(“Error:” + error.message);
      };
      worker.postMessage(40);
  }  
  </script>
</head>
<body>
</body>
亚洲必赢官网,</html>

把它们放到相同的目录,运行页面文件,查看控制台,可以看看运行的结果。
此地还有某些,在主线程中,onmessage事件可以运用其余一种办法挂接:

//fibonacci.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));
};

本子文件fibonacci.js代码:

代码如下:

把它们放到相同的目录,运行页面文件,查看控制台,可以看出运行的结果。
此间还有少数,在主线程中,onmessage事件可以选用其它一种方法挂接:

//fibonacci.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));
};

worker.addEventListener(‘message’, function(event) {
console.log(“Result:” + event.data);
}, false);

worker.addEventListener(‘message’, function(event) {
   console.log(“Result:” + event.data);
}, false);

把它们放到相同的目录,运行页面文件,查看控制台,可以看出运行的结果。
那边还有某些,在主线程中,onmessage事件可以选拔别的一种格局挂接:

私家觉得很忙碌,不如用onmessage直接。
选用任何脚本文件
干活线程可以动用全局方法importScripts来加载和采纳任何的域内脚本文件或者类库。例如上面都是合法的使用方法:

民用认为很辛勤,不如用onmessage直接。

worker.addEventListener(‘message’, function(event) {
   console.log(“Result:” + event.data);
}, false);

代码如下:

动用其它脚本文件
      工作线程可以应用全局方法importScripts来加载和应用此外的域内脚本文件或者类库。例如上边都是官方的选择情势:

私家觉得很劳累,不如用onmessage直接。

importScripts();/* imports nothing */
importScripts(‘foo.js’); /* imports just “foo.js” */
importScripts(‘foo.js’, ‘bar.js’);/* imports two scripts */

importScripts();                        
importScripts(‘foo.js’);                
importScripts(‘foo.js’, ‘bar.js’);      

选拔任何脚本文件      
工作线程能够利用全局方法importScripts来加载和采纳任何的域内脚本文件或者类库。例如上面都是官方的施用方式:

导入以后,可以一直使用这几个文件中的方法。看一个网上的小例子:

      导入未来,能够直接行使这个文件中的方法。看一个网上的小例子:

importScripts();                        /* imports nothing */
importScripts(‘foo.js’);                /* imports just “foo.js” */
importScripts(‘foo.js’, ‘bar.js’);      /* imports two scripts */

代码如下:

 
 importScripts(‘math_utilities.js’); 
 
 onmessage = function (event) 
 { 
   var first = event.data.first; 
   var second = event.data.second; 
   calculate(first,second); 
 }; 
 
 function calculate(first,second) { 
    //do the calculation work 
   var common_divisor=divisor(first,second); 
   var common_multiple=multiple(first,second); 
   postMessage(“Work done! ” + 
      “The least common multiple is ” + common_divisor  +

      导入未来,可以向来运用那些文件中的方法。看一个网上的小例子:

/**
* 使用 importScripts
方法引入外部资源脚本,在此间大家应用了数学公式总计工具库
math_utilities.js
* 当 JavaScript
引擎对那些资源文件加载完成后,继续执行下边的代码。同时,上边的的代码可以访问和调用
* 在资源文件中定义的变量和艺术。
**/
importScripts(‘math_utilities.js’);
onmessage = function (event)
{
var first = event.data.first;
var second = event.data.second;
calculate(first,second);
};
function calculate(first,second) {
//do the calculation work
var common_divisor=divisor(first,second);
var common_multiple=multiple(first,second);
postMessage(“Work done! ” +
“The least common multiple is ” + common_divisor +
” and the greatest common divisor is “+common_multiple);
}

      ” and the greatest common divisor is “+common_multiple); 
 } 

/** 
 * 使用 importScripts 方法引入外部资源脚本,在那里大家应用了数学公式总结工具库 math_utilities.js 
 * 当 JavaScript 引擎对那些资源文件加载完结后,继续执行上面的代码。同时,上面的的代码可以访问和调用
 * 在资源文件中定义的变量和措施。
 **/ 
 importScripts(‘math_utilities.js’); 
 
 onmessage = function (event) 
 { 
   var first = event.data.first; 
   var second =
event.data.second; 
   calculate(first,second); 
 }; 
 
 function calculate(first,second) { 
    //do the calculation work 
   var common_divisor=divisor(first,second); 
   var common_multiple=multiple(first,second); 
   postMessage(“Work done! ” + 
      “The least common multiple is ” + common_divisor  +

网上也有网友想到了采纳那里的importScripts方法解决资源预加载的问题(浏览器预先加载资源,而不会对资源举行解析和推行),道理也很简短。
线程嵌套
在劳作线程中还是能在开立子线程,各类操作如故一样的。
一同问题
Worker没有锁的体制,多线程的联名问题只能够靠代码来化解(比如定义信号变量)。
共享型SharedWebWorker 共享型web
worker主要适用于多连接出现的题目。因为要拍卖多连接,所以它的API与专用型worker稍微有点分别。除了这或多或少,共享型web
worker和专用型worker一样,不能够访问DOM,并且对窗体属性的造访也碰到限制。共享型web
worker也无法当先通讯。
页面脚本可以与共享型web worker通讯,但是,与专用型web
worker(使用了一个隐式的端口通信)稍微有点分歧的是,通讯是显式的通过利用一个端口(port)对象并附加上一个音信事件处理程序来展开的。
在接收web worker脚本的第二个新闻随后,共享型web
worker把一个事件处理程序附加到激活的端口上。一般景色下,处理程序会运作自己的postMessage()方法来把一个音信重返给调用代码,接着端口的start()方法生成一个立见成效的音讯进度。
看网上能找到的的唯一个例子:创制一个共享线程用于吸纳从分裂连接发送过来的授命,然后已毕和谐的吩咐处理逻辑,指令处理完了后将结果再次回到到种种分歧的总是用户。
HTML代码:

      网上也有网友想到了运用那里的importScripts方法解决资源预加载的问题(浏览器预先加载资源,而不会对资源进行辨析和进行),道理也很粗略。

      ” and the greatest common divisor is “+common_multiple); 
 } 

代码如下:

 

     
网上也有网友想到了使用那里的importScripts方法解决资源预加载的问题(浏览器预先加载资源,而不会对资源开展解析和履行),道理也很简短。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Shared worker example: how to use shared worker in
HTML5</title>
<script>
var worker = new SharedWorker(‘sharedworker.js’);
var log = document.getElementById(‘response_from_worker’);
worker.port.addEventListener(‘message’, function(e) {
//log the response data in web page
log.textContent =e.data;
}, false);
worker.port.start();
worker.port.postMessage(‘ping from user web page..’);
//following method will send user input to sharedworker
function postMessageToSharedWorker(input)
{
//define a json object to construct the request
var instructions={instruction:input.value};
worker.port.postMessage(instructions);
}
</script>
</head>
<body onload=”>
<output id=’response_from_worker’>
Shared worker example: how to use shared worker in HTML5
</output>
send instructions to shared worker:
<input type=”text” autofocus
oninput=”postMessageToSharedWorker(this);return false;”>
</input>
</body>
</html>

线程嵌套
      在劳作线程中还是能在创制子线程,种种操作照旧一如既往的。

 

剧本文件代码:

联合问题
      Worker没有锁的机制,多线程的同台问题只好靠代码来缓解(比如定义信号变量)。

线程嵌套       在工作线程中仍能够在开创子线程,各个操作仍旧一如既往的。

代码如下:

 

联合问题      
Worker没有锁的建制,四线程的协同问题只好靠代码来化解(比如定义信号变量)。

//
成立一个共享线程用于收纳从不一样连接发送过来的一声令下,指令处理完了后将结果再次来到到各种分化的连接用户。
var connect_number = 0;
onconnect = function(e) {
connect_number =connect_number+ 1;
//get the first port here
var port = e.ports[0];
port.postMessage(‘A new connection! The current connection number is ‘

共享型SharedWebWorker   共享型web
worker首要适用于多连接出现的题目。因为要拍卖多连接,所以它的API与专用型worker稍微有点分别。除了那点,共享型web
worker和专用型worker一样,无法访问DOM,并且对窗体属性的访问也面临限制。共享型web
worker也不能当先通讯。
  页面脚本可以与共享型web worker通讯,可是,与专用型web
worker(使用了一个隐式的端口通讯)稍微有点不一致的是,通信是显式的经过应用一个端口(port)对象并附加上一个音信事件处理程序来拓展的。

 

  • connect_number);
    port.onmessage = function(e) {
    //get instructions from requester
    var instruction=e.data.instruction;
    var results=execute_instruction(instruction);
    port.postMessage(‘Request: ‘+instruction+’ Response ‘+results
    +’ from shared worker…’);
    };
    };
    /*
    * this function will be used to execute the instructions send from
    requester
    * @param instruction
    * @return
    */
    function execute_instruction(instruction)
    {
    var result_value;
    //implement your logic here
    //execute the instruction…
    return result_value;
    }

  在接收web worker脚本的第一个信息之后,共享型web
worker把一个事件处理程序附加到激活的端口上。一般景色下,处理程序会运行自己的postMessage()方法来把一个音讯重返给调用代码,接着端口的start()方法生成一个灵光的新闻进度。
      看网上能找到的的绝无仅有个例子:成立一个共享线程用于收纳从不一样连接发送过来的下令,然后达成和谐的命令处理逻辑,指令处理完了后将结果回到到各类区其他连天用户。
HTML代码:

共享型SharedWebWorker   共享型web
worker首要适用于多连接现身的问题。因为要拍卖多连接,所以它的API与专用型worker稍微有点分别。除了那或多或少,共享型web
worker和专用型worker一样,不可能访问DOM,并且对窗体属性的拜会也饱尝限制。共享型web
worker也无法超过通讯。
  页面脚本可以与共享型web worker通讯,然则,与专用型web
worker(使用了一个隐式的端口通讯)稍微有点分化的是,通讯是显式的经过采纳一个端口(port)对象并附加上一个音信事件处理程序来展开的。

在地点的共享线程例子中,在主页面即各样用户连接页面构造出一个共享线程对象,然后定义了一个办法
postMessageToSharedWorker
向共享线程发送来之用户的指令。同时,在共享线程的兑现代码片段中定义
connect_number 用来记录连接到这么些共享线程的总和。之后,用 onconnect
事件处理器接受来自不一样用户的屡次三番,解析它们传递过来的通令。最后,定义一个了主意
execute_instruction
用于实践用户的下令,指令执行到位后将结果重返给种种用户。

<script> 
  var worker = new SharedWorker(‘sharedworker.js’); 
  var log = document.getElementByIdx_x_x_x_x(‘response_from_worker’); 
  worker.port.addEventListener(‘message’, function(e) { 
  //log the response data in web page 
  log.textContent =e.data; 
  }, false); 
  worker.port.start(); 
  worker.port.postMessage(‘ping from user web page..’); 
  
  //following method will send user input to sharedworker 
  function postMessageToSharedWorker(input) 
  { 
  //define a json object to construct the request 
  var instructions={instruction:input.value}; 
  worker.port.postMessage(instructions); 
  } 
  </script> 
 

  在收受web worker脚本的第四个音信随后,共享型web
worker把一个事件处理程序附加到激活的端口上。一般景况下,处理程序会运行自己的postMessage()方法来把一个新闻再次回到给调用代码,接着端口的start()方法生成一个卓有功效的信息进度。
     
看网上能找到的的唯一个例子:创立一个共享线程用于吸纳从差别连接发送过来的通令,然后落成团结的授命处理逻辑,指令处理完毕后将结果再次来到到各样差别的连年用户。
HTML代码:

此处大家并从未跟前边的例证一样使用到了工作线程的 onmessage
事件处理器,而是利用了此外一种办法
add伊夫(Eve)ntListener。实际上,前边已经说过,那二种的落到实处原理基本一致,只是在此间有些微微的异样,即使运用到了
add伊夫(Eve)ntListener 来经受来自共享线程的音信,那么就要先选用worker.port.start()
方法来启动这些端口。之后就足以像工作线程的采纳办法同样健康的收到和殡葬音信。
最后陈述
线程中能做的事
1.能使用setTimeout(), clearTimeout(),
setInterval(),clearInterval()等函数。
2.能使用navigator对象。
3.能选拔XMLHttpRequest来发送请求。
4.可以在线程中应用Web Storage。
5.线程中可以用self获取本线程的作用域。
线程中不可能做的事
1.线程中是不可能应用除navigator外的DOM/BOM对象,例如window,document(想要操作的话只好发送音信给worker成立者,通过回调函数操作)。
2.线程中不能动用主线程中的变量和函数。
3.线程中不可能应用有”挂起”效果的操作命令,例如alert等。
4.线程中无法跨域加载JS。
线程也是必要消耗资源的,而且使用线程也会带来一定的繁杂,所以如果没有充足的理由来行使额外的线程的话,那么就不要用它。
实用参考
合法文档:
WebWorker分类表明:
本子之家:
WebWorker概述:

 脚本文件代码:

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset=”UTF-8″> 
 <title>Shared worker example: how to use shared worker in HTML5</title> 
 
 <script> 
  var worker = new SharedWorker(‘sharedworker.js’); 
  var log = document.getElementById(‘response_from_worker’); 
  worker.port.addEventListener(‘message’, function(e) { 
  //log the response data in web page 
 
log.textContent =e.data; 
  }, false); 
  worker.port.start(); 
  worker.port.postMessage(‘ping from user web page..’); 
  
  //following method will send user input to sharedworker 
  function postMessageToSharedWorker(input) 
  { 
  //define a json object to construct the request 
  var instructions={instruction:input.value}; 
  worker.port.postMessage(instructions); 
  } 
 </script> 
 
 </head> 
 <body onload=”> 
 <output id=’response_from_worker’> 
   Shared worker example: how to use shared worker in HTML5 
 </output> 
  send instructions to shared worker: 
 <input type=”text” autofocus oninput=”postMessageToSharedWorker(this);return false;”> 
 </input> 
 </body> 
 </html> 

 // 成立一个共享线程用于吸纳从差异连接发送过来的下令,指令处理到位后将结果回到到各种差其余一而再用户。
 var connect_number = 0; 
 
 onconnect = function(e) { 
  connect_number =connect_number+ 1; 
  //get the first port here 
  var port = e.ports[0]; 
  port.postMessage(‘A new connection! The current connection number is ‘ 
  + connect_number); 
  port.onmessage = function(e) { 
   //get instructions from requester 
   var instruction=e.data.instruction; 
   var results=execute_instruction(instruction); 
    port.postMessage(‘Request: ‘+instruction+’ Response ‘+results 
      +’ from shared worker…’); 
  }; 
 }; 
 function execute_instruction(instruction) 
 { 
 var result_value; 
 //implement your logic here 
 //execute the instruction… 
 return result_value;
 } 

剧本文件代码:

      在上头的共享线程例子中,在主页面即各类用户连接页面构造出一个共享线程对象,然后定义了一个方法
postMessageToSharedWorker
向共享线程发送来之用户的授命。同时,在共享线程的贯彻代码片段中定义
connect_number 用来记录连接到那一个共享线程的总额。之后,用 onconnect
事件处理器接受来自分化用户的连日,解析它们传递过来的吩咐。最终,定义一个了措施
execute_instruction
用于执行用户的命令,指令执行到位后将结果回到给种种用户。

 // 创制一个共享线程用于吸纳从差异连接发送过来的指令,指令处理到位后将结果回到到种种差距的连日用户。
 var connect_number = 0; 
 
 onconnect = function(e) { 
  connect_number =connect_number+ 1; 
  //get the first port here 
  var port = e.ports[0]; 
  port.postMessage(‘A new connection! The current connection number is ‘ 
  + connect_number); 
  port.onmessage = function(e) { 
   //get instructions from requester 
   var instruction=e.data.instruction; 
   var results=execute_instruction(instruction); 
    port.postMessage(‘Request: ‘+instruction+’ Response ‘+results 
      +’ from shared worker…’); 
  }; 
 }; 
 
 /* 
 * this function will be used to execute the instructions send from requester 
 * @param instruction 
 * @return 
 */ 
 function execute_instruction(instruction) 
 { 
 var result_value; 
 //implement your logic here 
 //execute the instruction… 
 return result_value;
 } 

      那里大家并从未跟前边的例证一样使用到了工作线程的 onmessage
事件处理器,而是接纳了此外一种方法
add伊夫(Eve)ntListener。实际上,后边早已说过,那三种的兑现原理基本一致,只是在此处有些微微的异样,假诺接纳到了
add伊芙ntListener 来经受来自共享线程的消息,那么就要先使用
worker.port.start()
方法来启动这几个端口。之后就足以像工作线程的利用格局一样健康的接收和发送音讯。

     
在上头的共享线程例子中,在主页面即各样用户连接页面构造出一个共享线程对象,然后定义了一个办法
postMessageToSharedWorker
向共享线程发送来之用户的授命。同时,在共享线程的贯彻代码片段中定义
connect_number 用来记录连接到这么些共享线程的总和。之后,用 onconnect
事件处理器接受来自分化用户的连日,解析它们传递过来的吩咐。最后,定义一个了艺术
execute_instruction
用于实践用户的指令,指令执行到位后将结果回到给各类用户。

 

      那里大家并不曾跟前边的例子一样采用到了劳作线程的 onmessage
事件处理器,而是选择了此外一种方法
add伊芙(Eve)ntListener。实际上,前边早已说过,那两种的兑现原理基本一致,只是在此处有些微微的反差,如果接纳到了
add伊夫(Eve)ntListener 来经受来自共享线程的音讯,那么就要先使用
worker.port.start()
方法来启动那么些端口。之后就足以像工作线程的利用方法相同健康的收纳和发送新闻。

线程中能做的事
1.能使用setTimeout(), clearTimeout(),
setInterval(),clearInterval()等函数。
2.能使用navigator对象。
3.能选用XMLHttpRequest来发送请求。
4.足以在线程中利用Web Storage。

 

5.线程中能够用self获取本线程的成效域。

最终陈述

 

线程中能做的事
1.能使用setTimeout(), clearTimeout(),
setInterval(),clearInterval()等函数。
2.能使用navigator对象。
3.能动用XMLHttpRequest来发送请求。
4.方可在线程中运用Web Storage。

线程中不可以做的事
1.线程中是不可以选用除navigator外的DOM/BOM对象,例如window,document(想要操作的话只可以发送音信给worker成立者,通过回调函数操作)。
2.线程中不能选取主线程中的变量和函数。
3.线程中不可能选用有”挂起”效果的操作命令,例如alert等。
4.线程中无法跨域加载JS。

5.线程中得以用self获取本线程的功效域。

 

 

线程也是索要开支资源的,而且使用线程也会带来一定的扑朔迷离,所以一旦没有丰裕的说辞来选取额外的线程的话,那么就不用用它。

线程中不可能做的事
1.线程中是无法利用除navigator外的DOM/BOM对象,例如window,document(想要操作的话只好发送音信给worker创造者,通过回调函数操作)。
2.线程中不可以使用主线程中的变量和函数。
3.线程中不可以选拔有”挂起”效果的操作命令,例如alert等。
4.线程中无法跨域加载JS。

 

线程也是急需成本资源的,而且选择线程也会带来一定的纷纭,所以假使没有丰富的说辞来利用额外的线程的话,那么就毫无用它。

实用参考 法定文档:
WebWorker分类表达:
WebWorker概述:

网站地图xml地图