开始运用Web Workers澳门太陽城集团登录网址

澳门太阳集团城网址,好帮手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发送大量的多少。

父线程同样能够声多美滋(Dumex)个回调函数,来侦听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对象,不过它们能够调用一些函数,如setTimeout()/clearTimeout()、setInterval()/clearInterval()、navigator等等,也能够访问XMLHttpRequest和localStorge对象。

 

同源限制

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

 

谷歌(Google) 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。

澳门太陽城集团登录网址 1

为处理web
worker抛出的老大,你能够侦听error事件,它属于Error伊芙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)。到方今截至,大家只列举了专用线程的例证。专项使用线程与成立线程的台本或页面一贯关联,即具备格外的维系。而分享线程允许线程在同源中的两个页面间张开分享,举个例子:同源中负有页面或脚本能够与同叁个分享线程通讯。

开始运用Web Workers澳门太陽城集团登录网址。“创立三个分享线程,直接将脚本的UQX56L或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,作者提出你读书合西班牙语档开始运用Web Workers澳门太陽城集团登录网址。。

 

实则行使场景

worker的实际上爆发情状恐怕是,你必要管理贰个一块的第三方接口,于是主线程供给等待结果再拓展下一步操作。这种景况下,你能够生成三个worker,由它代理,异步达成此职务。

Web
worker在轮询情形下也丰裕适用,你能够在后台不断询问目的,并在有新数据时向主线程发送音讯。

你大概境遇供给向服务端重返多量的多少的气象。经常,处理大量数据会颓败影响程序的响应手艺,然后导致不良用户体验。更优雅的秘技是将拍卖专门的学业分配给多少worker,由它们管理不重叠的数目。

还只怕有使用场景晤面世在经过七个web
worker解析音频或录制的来自,各类worker针对专门项目难题。

 

结论

趁着HTML5的进行,web worker标准也会不停步入。假诺你希图动用web
worker,看一看它的法定文书档案不是坏事。

专属线程的跨浏览器匡助开始运用Web Workers澳门太陽城集团登录网址。此时此刻还不易,Chrome,Safari和Firefox近些日子的版本都帮忙,乃至IE本次都并未有滑坡太多,IE10照旧不错的。不过分享线程独有当前版本的Chrome和Safari协理。另外奇异的一点是,Android
2.1的浏览器接济web worker,反而4.0版本不扶助。苹果也从iOS 5.0起初帮衬web
worker。

想像一下,在原先单线程情形下,八线程会拉动Infiniti可能啊~

 

译注:自个儿对此JavaScript技艺领域并不是极其熟知,如有误翻的地方,请我们立即争论指正,作者将即刻修改!!!最终,推荐两篇有关国人可以小说

《HTML5 web worker的使用 》

《深深HTML5 Web
Worker应用实践:二十二十四线程编制程序》

 

 

俄文原稿:开始运用Web Workers澳门太陽城集团登录网址。tutsplus,编译:伯乐在线
– 胡蓉(@蓉Flora)

小说链接:

【如需转发,请在正文中标记并保留原来的小说链接、译文链接和翻译等音讯,多谢同盟!】

 

赞 1 收藏
评论

千帆竞发选择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。

在保卫安全响应式分界面包车型客车同不经常候,通过单线程序调节制管理那样多事件是项辛劳的天职。它迫使开辟职员不得不借助一些技艺或利用浮动的艺术(如选择setTimeout(),setInterval(),或调用XMLHttpRequest和DOM事件)来落到实处产出。不过,就算那个能力肯定地提供了缓慢解决异步调用的方法,但非阻塞的并不意味是出现的。约翰Resig在他的博客中表达了干吗无法互相运营。

限制

一旦您曾经和JavaScript打过一段时间的社交,那么你一定也遭到过如下令人讨厌的对话框,提醒您有脚本无响应。没有错,差不多大相当多的页面无响应都以由JavaScript代码引起的。

澳门太陽城集团登录网址 2

以下是一对运维脚本时形成浏览器无响应的因由:

  • 过多的DOM操作:DOM操作大概是在JavaScript运转中代价最高的。所以,多量的DOM操作无疑是你代码重构的最棒方向之一。
  • 无安歇循环:审视你代码中复杂的嵌套循环恒久不是坏事。复杂的嵌套循环所做的干活平日比实际供给做的多相当多,或然你能够找到别的方法来兑现均等的机能。
  • 同期涵盖以上二种:最坏的图景正是众所周知有更优雅的点子,却依然在循环中不断更新DOM成分,比方可以行使DocumentFragment。

 

关于我:胡蓉

澳门太陽城集团登录网址 3

胡蓉:某互连网厂商竞相设计员。在这么一个梦想者云集的网络乐土中,用心培育着属于本人的那一片园地。做和谐喜爱的,然后直接百折不回下去~(和讯天涯论坛:@蓉Flora)

个人主页 ·
小编的篇章

澳门太陽城集团登录网址 4

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图