电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

HTML5 Web Worker的适用实例教程

2020-10-29 15:04:10 出处:[ 菜菜电脑网 ] 人气:次阅读
Web Worker是HTML5共享的一个javascript多线程解决方案,我们可以将一些大测算量的代码交由web Worker列车运行而不清空用户界面。本文主要参考了浅谈HTML5 Web Worker的用作,小编真是挺不错的,现在社交给大家,也给大家继续做个简介。一起跟著小编过来进去吧,决心能努力到大家。

一:如何常用Worker

Web Worker的基本原理就是在当前javascript的主线程中,用作Worker类载入一个javascript文件来另辟一个新的线程,作用互不阻碍拒绝执行的效果,并且透过主线程和从新线程之间数据交换的适配器:postMessage,onmessage。

那么如何用到呢,我们看一个例子:


//worker.jsonmessage =function (evt){  var d = evt.data;//通过evt.data取得传送来的数据  postMessage( d );//将提供到的数据邮寄亦会主线程}

HTML页面:test.html


<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript">//WEB页主线程var worker =new Worker("worker.js"); //创建者一个Worker对象并向它传达将在从新线程中监督的脚本的URL worker.postMessage("hello world");     //向worker发送数据 worker.onmessage =function(evt){     //发送到worker传过来的数据函数   console.log(evt.data);              //驱动worker收发来的数据 } </script> </head> <body></body></html>

用Chrome浏览器挡住test.html后,操作者输入 "hello world" 问到程序执行顺利。

通过这个例子我们可以显露运用于web worker主要分成以下几部分

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.COMonmessage方法来交还主线程发送到过来的数据。

二:Worker能要用什么

并不知道了如何用到web worker ,那么它到底有什么用,可以表哥我们消除那些问题呢。我们来看一个fibonacci数列的例子。

大家真的在数学上,fibonacci数列被以迭代的方法定义:F0=0,F1=1,Fn=F(n-1)+F(n-2)(n>=2,n∈N*),而javascript的常用充分利用为: 


var fibonacci =function(n) {    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);};//fibonacci(36)

在chrome中用该方法透过39的fibonacci数列执行者时间为19097毫秒 ,而要数值40的时候浏览器单独上会脚本倒楣了。

由于javascript是单线程拒绝执行的,在所求数列的过程中浏览器无法继续执行其它javascript脚本,UI图像线程也可能会被挂,从而所致浏览器离开僵死状态。用作web worker将数列的近似值过程加到一个最初线程里去督导将避开这种情况的注意到。明确看例子:


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

HTML页面:fibonacci.html


<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>web worker fibonacci</title><script type="text/javascript">  onl oad =function(){      var worker =new Worker('fibonacci.js');        worker.addEventListener('message', function(event) {        var timer2 = (new Date()).valueOf();           console.log( '结果:'+event.data, '时间:'+ timer2, '用时:'+ ( timer2  - timer ) );      }, false);      var timer = (new Date()).valueOf();      console.log('开始推算:40','时间:'+ timer );      setTimeout(function(){          console.log('定时器函数在量化数列时制订了', '时间:'+ (new Date()).valueOf() );      },1000);      worker.postMessage(40);      console.log('我在近似值数列的时候指派了', '时间:'+ (new Date()).valueOf() );  }    </script></head><body></body></html>

在Chrome中挡住fibonacci.html,操作员获得如下可用:

开始量化:40 时间:1316508212705
我在数值数列的时候拒绝执行了 时间:1316508212734
定时器函数在量度数列时可执行了 时间:1316508213735
结果:102334155 时间:1316508262820 用时:50115

这个例子指明在worker中指派的fibonacci数列的推算并才会影响到主线程的代码执行,实质上在自己独立国家的线程中数值,只是在量度进行时之后将结果核对主线程。

利用web worker我们可以在前端指派一些适合于的大量运算而才会影响页面的展现,并且不必枪弹出有恶心的脚本正陪查看。

下面这个例子用作了web worker来测算场景中的像素,场景推入时是一片一片来进行绘制的,一个worker只近似值一块像素值。

三:Worker的其他尝试

我们已经发觉Worker通过转给一个URL来创建人一个worker,那么我们否可以利用web worker来继续做一些相同jsonp的立即呢,大家并不知道jsonp是通过填充script标签来存储json数据的,而script元素在复制到和执行者过程中都是溢式的,如果能利用web worker充分利用异步初始化将都会非常差强人意。

下面这个例子将通过 web worker、jsonp、ajax三种有所不同的方式来存储一个169.42KB大小的JSON数据


// /aj/webWorker/core.jsfunction $E(id) {    return document.getElementById(id);}onload =function() {    //通过web worker初始化    $E('workerLoad').onclick =function() {        var url ='http://js.wcdn.cn/aj/mblog/face2';        var d = (new Date()).valueOf();        var worker =new Worker(url);        worker.onmessage =function(obj) {            console.log('web worker: '+ ((new Date()).valueOf() - d));        };    };    //通过jsonp存储    $E('jsonpLoad').onclick =function() {        var url ='http://js.wcdn.cn/aj/mblog/face1';        var d = (new Date()).valueOf();        STK.core.io.scriptLoader({            method:'post',            url : url,            onComplete : function() {                console.log('jsonp: '+ ((new Date()).valueOf() - d));            }        });    };    //通过ajax查找    $E('ajaxLoad').onclick =function() {        var url ='http://js.wcdn.cn/aj/mblog/face';        var d = (new Date()).valueOf();        STK.core.io.ajax({            url : url,            onComplete : function(json) {                console.log('ajax: '+ ((new Date()).valueOf() - d));            }        });    };};

HTML页面:/aj/webWorker/worker.html


<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Worker example: load data</title><script src="http://js.t.sinajs.cn/STK/js/gaea.1.14.js" type="text/javascript"></script><script type="text/javascript" src="http://js.wcdn.cn/aj/webWorker/core.js"></script></head><body>    <input type="button" id="workerLoad" value="web worker查找"></input>    <input type="button" id="jsonpLoad" value="jsonp复制到"></input>    <input type="button" id="ajaxLoad" value="ajax载入"></input></body></html>

设置HOST

127.0.0.1 js.wcdn.cn

通过 http://js.wcdn.cn/aj/webWorker/worker.html 会见页面然后分别通过三种方式存储数据,得不到启动时反向:


web worker: 174jsonp: 25ajax: 38

多试用几次发掘出通过jsonp和ajax查找数据的时间相异很小,而web worker的读取时间一直保持稳定高位,所以用web worker来启动时数据还是比较慢的,即便是大数据量情况下也一定会任何优势,显然是Worker初始化最初起线程比较耗时间。除了在读取过程中是无情况严重的之外并未任何优势。

那么web worker有否能默许跨域js复制到呢,这次我们通过http://127.0.0.1/aj/webWorker/worker.html 来会见页面,当浏览 "web worker调用" 初始化按钮时Chrome下无任何揭示,FF6下提醒错误。由此我们可以真的web worker是不赞成跨域存储JS的,这对于将静态文件部署到单独的静态服务器的网站来说是个坏消息。

所以web worker必需用来初始化同域下的json数据,而这方面ajax已经可以能用了,而且效率更高更统一标准。还是让Worker来作它自己娴熟的事吧。

四:总结

web worker看似很快乐,但亦非是魔鬼。

我们可以认真什么:

1.可以写入一个JS顺利完成大量的繁复推算而不悬挂主进程,并通过postMessage,onmessage同步进行通信

2.可以在worker中通过importScripts(url)存储另外的脚本文件

3.可以应用于 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以运用于XMLHttpRequest来发送到请

5.可以会面时navigator的部分属性

有那些局限性:

1.没法跨域写入JS

2.worker内代码没法会面时DOM

3.各个浏览器对Worker的解决问题并不大一致,例如FF里强制worker中创建人新的worker,而Chrome中就不出

4.不是每个浏览器都背书这个取而代之特性

之外中选:

H5的多线程如何构建Web Worker

WebWorkers-前端的高性能测算

PHP socket 服务器框架workerman

以上就是HTML5 Web Worker的用作实例教程的简要内容,更多代为注意php中文网其它无关文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152