xml地图|网站地图|网站标签 [设为首页] [加入收藏]

澳门皇家娱乐平台开始使用Web,Worker异步执行及

来源:http://www.ccidsi.com 作者:最新解决方案 人气:100 发布时间:2019-05-02
摘要:起来应用Web Workers 2012/11/28 · HTML5,JavaScript · 来源:伯乐在线     ·HTML5,Javascript 英文原来的书文:tutsplus,编译:伯乐在线– 胡蓉(@蓉Flora) 单线程(Single-threaded)运转是JavaScript语

起来应用Web Workers

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

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

单线程(Single-threaded)运转是JavaScript语言的宏图目的之一,进来说之是保持JavaScript的粗略。不过自个儿无法不要说,固然JavaScript具备那样语言特质,但它并非简单!我们所说的“单线程”是指JavaScript唯有2个线程调整。是的,那一点令人心寒,JavaScript引擎二遍只好做1件事。

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

今日,你是还是不是以为要想使用下您机器闲置的多核管理器太受限制?不用操心,HTML5将转移那一切。

JavaScript的单线程格局

有学派以为JavaScript的单线程特质是1种简化,可是也有人以为那是壹种限制。后者提议的是3个很好的思想,越发是未来web应用程序大量的使用JavaScript来拍卖分界面事件、轮询服务端接口、管理多量的多少以及依照服务端的响应操作DOM。

在保卫安全响应式分界面包车型客车还要,通过单线程调控管理那样多事件是项劳顿的职分。它迫使开拓职员不得不信赖一些本领或利用浮动的点子(如利用setTimeout(),setInterval(),或调用XMLHttpRequest和DOM事件)来促成产出。但是,即便那些才能肯定地提供了缓慢解决异步调用的措施,但非阻塞的并不意味是出现的。JohnResig在他的博客中表明了干吗不可能互相运转。

限制

一经您曾经和JavaScript打过一段时间的应酬,那么你一定也十分受过如下令人讨厌的对话框,提醒您有脚本无响应。没错,差不离大多数的页面无响应皆以由JavaScript代码引起的。

澳门皇家娱乐平台 1

以下是一些运转脚本时造成浏览器无响应的原委:

  • 过多的DOM操作:DOM操作也许是在JavaScript运转中代价最高的。所以,大量的DOM操作无疑是您代码重构的超级方向之一。
  • 无终止循环:审视你代码中复杂的嵌套循环永恒不是帮倒忙。复杂的嵌套循环所做的专业平时比其实须要做的多繁多,恐怕你能够找到任何艺术来得以落成平等的功用。
  • 与此同时含有以上二种:最坏的景况正是不问可知有更优雅的方法,却依旧在循环中不断更新DOM元素,举例能够选取DocumentFragment。

 

点评:HTML伍 中的 Web Worker 能够分为三种不相同线程类型,二个是专用线程 Dedicated Worker,1个是共享线程 Shared Worker。三种档期的顺序的线程各有差别的用途,感兴趣的仇敌能够了然下啊,只怕对您抱有支持

Javascript施行机制       在HTML五此前,浏览器中JavaScript的运行都以以单线程的艺术行事的,固然有五种措施贯彻了对拾二线程的模拟(比方:Javascript 中的 setinterval 方法,setTimeout 方法等),可是在真相上先后的周转依旧是由 JavaScript 引擎以单线程调解的法子开展的。在 HTML伍 中引进的做事线程使得浏览器端的 Javascript 引擎能够并发地实践 Javascript 代码,从而落成了对浏览器端拾二线程编制程序的绝妙支持。

好帮手Web Workers

幸亏有了HTML5和Web Workers,你能够真正生成一条异步的线程。当主线程管理分界面事件时,新的worker可以在后台运维,它还能够庞大的拍卖大批量的数码。比方,二个worker能够管理大型的数据结构(如JSON),从中提取变量消息然后在分界面中显得。好了,废话不多说,让我们看某些事实上的代码吧。

 

成立2个Worker

普通,与web worker相关的代码都坐落2个单独的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管理器,来接受从父线程发回的音信。

索求下1个质数的事例分明不是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成分以至不能够更新页面元素听上去有点严谨,但是那是2个首要的平安规划决定。

想像一下,如果过二十多线程都试着去立异同一个因素那正是个魔难。所以,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。

澳门皇家娱乐平台 2

为拍卖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)。到方今截至,大家只列举了专用线程的事例。专用线程与创制线程的本子或页面一贯涉及,即全体分外的关联。而共享线程允许线程在同源中的多个页面间举办共享,举例:同源中装有页面或脚本能够与同多个共享线程通讯。

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

双面最重大的区分在于,共享worker与端口相关联,以保障父脚本或页面能够访问。如下代码成立了二个共享worker,并扬言了3个回调函数以侦听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的其实产生景况大概是,你必要管理3个一起的第一方接口,于是主线程需求拭目以俟结果再进行下一步操作。那种情况下,你能够生成1个worker,由它代理,异步落成此职分。

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

您可能境遇须要向服务端重回大量的数量的景况。平日,管理多量数据会黯然影响程序的响应手艺,然后导致不良用户体验。更优雅的方法是将处管事人业分配给多少worker,由它们管理不重叠的多少。

再有使用场景会现出在通过多少个web worker分析音频或摄像的发源,每一种worker针对专项难点。

 

结论

乘势HTML5的张开,web worker标准也会持续投入。即使您图谋选择web worker,看1看它的法定文书档案不是帮倒忙。

专项线程的跨浏览器扶助此时此刻还行,Chrome,Safari和Firefox近期的本子都帮忙,以至IE本次都不曾落后太多,IE十照旧准确的。可是共享线程唯有当前版本的Chrome和Safari协助。此外奇异的一些是,Android 二.一的浏览器协理web worker,反而四.0本子不协理。苹果也从iOS 伍.0上马帮助web worker。

想像一下,在本来单线程情形下,10二线程会带来Infiniti可能啊~

 

译注:本人对此JavaScript才干世界并不是特意纯熟,如有误翻的地点,请大家及时钻探指正,作者将随即修改!!!最终,推荐两篇有关国人理想小说

《HTML5 web worker的使用 》

《浓密HTML5 Web Worker应用实践:八线程编制程序》

 

 

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

小说链接:

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

 

赞 1 收藏 评论

Javascript实施机制
在HTML五在此之前,浏览器中JavaScript的周转都以以单线程的秘诀职业的,即使有二种办法贯彻了对十二线程的效仿(比方:Javascript 中的 setinterval 方法,setTimeout 方法等),不过在精神上先后的周转依旧是由 JavaScript 引擎以单线程调节的不二秘技开始展览的。在 HTML伍 中引进的干活线程使得浏览器端的 Javascript 引擎能够并发地实践 Javascript 代码,从而落成了对浏览器端十二线程编制程序的美好扶助。

Javascript中的八线程 - WebWorker       HTML5 中的 Web Worker 能够分为两种不一样线程类型,三个是专用线程 Dedicated Worker,2个是共享线程 Shared Worker。两种类型的线程各有分裂的用途。

有关小编:胡蓉

澳门皇家娱乐平台 3

胡蓉:某网络厂商竞相设计员。在如此2个梦想者云集的网络乐土中,用心培育着属于本人的那一片园地。做团结心爱的,然后径直百折不回下去~(今日头条搜狐:@蓉Flora) 个人主页 · 作者的篇章

澳门皇家娱乐平台 4

Javascript中的二十四线程 - WebWorker HTML伍 中的 Web Worker 能够分成两种差别线程类型,3个是专用线程 Dedicated Worker,多少个是共享线程 Shared Worker。两种类型的线程各有不一致的用处。
专用型web worker
专用型worker与创立它的本子连接在一道,它能够与其他的worker或是浏览器组件通信,可是他不能够与DOM通讯。专用的意思,笔者想就是以此线程一遍只处理三个急需。专用线程在除了IE外的各个主流浏览器中都完结了,能够放心使用。
开创线程
创办worker很轻松,只要把须求在线程中推行的JavaScript文件的公文名传给构造函数就足以了。
线程通讯
在主线程与子线程间实行通讯,使用的是线程对象的postMessage和onmessage方法。不管是什么人向哪个人发多少,发送发使用的都以postMessage方法,接收方都以应用onmessage方法接收数据。postMessage唯有3个参数,那正是传递的数码,onmessage也唯有八个参数,假若为event,则经过event.data获取收到的数额。
发送JSON数据
JSON是JS原生支持的东西,不用白不用,复杂的数目就用JSON传送吧。比如:

专用型web worker

代码如下:

  专用型worker与创立它的本子连接在一块,它能够与其余的worker或是浏览器组件通信,可是他无法与DOM通讯。专用的意思,就是其1线程叁次只管理3个急需。专用线程在除了IE外的各个主流浏览器中都落成了,能够放心使用。
制造线程
      成立worker很轻便,只要把必要在线程中实行的JavaScript文件的公文名传给构造函数就能够了。

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

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

管理错误
当线程发生错误的时候,它的onerror事件回调会被调用。所以管理错误的章程很轻巧,正是挂接线程实例的onerror事件。这么些回调函数有三个参数error,这么些参数有贰个字段:message

发送JSON数据
      JSON是JS原生援救的东西,不用白不用,复杂的多寡就用JSON传送吧。比如:

  • 不当音讯;filename - 爆发错误的台本文件;lineno - 爆发错误的行。
    销毁线程
    在线程内部,使用close方法线程本身销毁本人。在线程外部的主线程中,使用线程实例的terminate方法销毁线程。
    下边从三个例证看线程的基本操作:
    HTML代码:

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

代码如下:

管理错误
      当线程发生错误的时候,它的onerror事件回调会被调用。所以处理错误的法子很简短,正是挂接线程实例的onerror事件。那么些回调函数有三个参数error,那一个参数有一个字段: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);
}
</script>
</head>
<body>
</body>
</html>

  • 张冠李戴音信;filename - 发生错误的剧本文件;lineno - 发生错误的行。

本子文件fibonacci.js代码:

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

代码如下:

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代码:

把它们放到同样的目录,运营页面文件,查看控制台,可以看看运转的结果。
那边还有一些,在主线程中,onmessage事件能够使用此外1种办法挂接:

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

代码如下:

把它们放到一样的目录,运转页面文件,查看调控台,能够见到运营的结果。
那边还有有个别,在主线程中,onmessage事件能够利用其余1种艺术挂接:

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:澳门皇家娱乐平台开始使用Web,Worker异步执行及

关键词: 68399皇家赌场 HTML5 前台HTML/CSS 前台html5 前台java

最火资讯