Web Worker是HTML5出示的1个javascript线程同步处理计划方案，大家能够将1些大测算量的编码交由web Worker运作而不冻洁客户页面。
1：怎样应用Worker
Web Worker的基础基本原理便是在当今javascript的主进程中，应用Worker类载入1个javascript文档来开拓1个新的进程，起到互不堵塞实行的实际效果，而且出示主进程和新进程之间数据信息互换的插口：postMessage，onmessage。
那末怎样应用呢，大家看1个事例：
//worker.js
onmessage =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⑻"/>
<script type="text/javascript">
//WEB页主进程
var worker =new Worker("worker.js"); //建立1个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 ) 载入1个JS文档来建立1个worker，另外回到1个worker案例。
2.根据worker.postMessage( data ) 方式来向worker推送数据信息。
3.关联worker.onmessage方式来接受worker推送过来的数据信息。
4.可使用 worker.terminate() 来停止1个worker的实行。
worker新进程：
1.根据postMessage( data ) 方式来向主进程推送数据信息。
2.关联onmessage方式来接受主进程推送过来的数据信息。
2：Worker能做甚么
了解了怎样应用web worker ，那末它究竟有甚么用，能够帮大家处理那些难题呢。大家看来1个fibonacci数列的事例。
大伙儿了解在数学课上，fibonacci数列被以递归的方式界定：F0=0，F1=1，Fn=F(n⑴)+F(n⑵)（n>=2，n∈N*），而javascript的常见完成为：
var fibonacci =function(n) {
return n <2? n : arguments.callee(n ⑴) + arguments.callee(n ⑵);
};
//fibonacci(36)
在chrome选用该方式开展39的fibonacci数列实行時间为19097毫秒 ，而要测算40的情况下访问器立即提醒脚本制作忙了。
因为javascript是单进程实行的，在求数列的全过程中访问器不可以实行其它javascript脚本制作，UI3D渲染进程也会被脱机，从而致使访问器进到僵死情况。应用web worker将数列的测算全过程放入1个新进程里去实行将防止这类状况的出現。实际看事例：
//fibonacci.js
var fibonacci =function(n) {
return n <2? n : arguments.callee(n ⑴) + arguments.callee(n ⑵);
};
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⑻"/>
<title>web worker fibonacci</title>
<script type="text/javascript">
onload =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 時间:05
我在测算数列的情况下实行了 時间:34
定时执行器涵数在测算数列时实行了 時间:35
結果：102334155 時间:20 用时：50115
这个事例表明在worker中实行的fibonacci数列的测算其实不会危害到主进程的编码实行，彻底在自身单独的进程中测算，只是在测算进行以后将結果送回主进程。
运用web worker大家能够在前端开发实行1些繁杂的很多运算而不容易危害网页页面的展现，而且不容易弹出恶心想吐的脚本制作正忙提醒。
下面这个事例应用了web worker来测算情景中的像素，情景开启时是1片1片开展绘图的，1个worker只测算1块像素值。
3：Worker的别的尝试
大家早已了解Worker根据接受1个URL来建立1个worker，那末大家是不是能够运用web worker来做1些相近jsonp的恳求呢，大伙儿了解jsonp是根据插进script标识来载入json数据信息的，而script元素在载入和实行全过程中全是堵塞式的，假如能运用web worker完成多线程载入可能十分非常好。
下面这个事例将根据 web worker、jsonp、ajax3种不一样的方法来载入1个169.42KB尺寸的JSON数据信息
// /aj/webWorker/core.js
function $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⑻"/>
<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 浏览网页页面随后各自根据3种方法载入数据信息，获得操纵台輸出：
web worker: 174 jsonp: 25 ajax: 38
多试几回发现根据jsonp和ajax载入数据信息的時间相差不大，而web worker的载入時间1直处在高位，因此用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做它自身善于的事吧。
4：总结
web worker看起来很幸福，但随处是魔鬼。
大家能够做甚么：
1.能够载入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的完成不大1致，比如FF里容许worker中建立新的worker,而Chrome中就不好
4.并不是每一个访问器都适用这个新特点
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 html网页制作_php网页制作_网页设计稿_网页编辑工具_学生网页设计模板 版权所有 （网站地图） 粤ICP备10235580号