【操作系统】HTML5之Worker Thread

作者:操作系统

二〇一三-12-0321:2814陆拾陆个人读书钻探(3卡塔尔国收藏举报古板网页中存放的JSP语言都以实行在UI的左右文中,平日的话这种JSP管理的都以简约逻辑,没啥难题,随着Web复杂度越来高,JSP能管理的事务也尤为复杂,假若JSP计算量一点都一点都不小的话,那就能够引致UI页面假死。HTML5中的WorkerThread能够缓和那些难点,WorkerThread通过UIthread创制几个新的线程来实行测算,音信和结果通过WebMessage来進展报纸发表,由于这种异步性,UI便能够相比通畅地响应新到来的风浪。调用进程如下:1.新的劳作线程执行体放在八个独门的JS文件中,比如worker.js.01.self.onmessage=function(event卡塔尔(قطر‎{02.//dotherealcompute---begin03.//04.//dotherealcompute---end05.//postmessagebacktoUIthread06.self.postMessage(XXXX卡塔尔(قطر‎;07.};2.在UI的实践线程中生成叁个worker对象,worker对象的布局函数参数正是worker.js01.varworker=newWorker("worker.js"卡塔尔(قطر‎;3.底下就足以发送新闻让worker干活了01.worker.postMessage("perise"卡塔尔国;4.活干完了给UI发送音讯,也正是首先步中的01.self.postMessage(XXXX卡塔尔;5.UI进行响应-collapsesourceviewplaincopytoclipboardprint?01.worker.onmessage=function(event卡塔尔{02.//updateUIhere03.};Notes:*在Chrome中疗养的时候会并发SECUQashqaiITY_ELANDPAJERO:DOMException18,轶事是Webkit的bug,未有细究,能够由此搭建多少个地点的HTTP服务器来消除,把HTML文件放到本地服务器上就足以绕开那一个安全难题了,俺动用的是WAMP。*操作系统,或许是为着垄断WorkerThread的复杂度,Chrome的WorkerThread中不可能再生成新的workerthread,其实那一个超轻巧绕开,发送一个信息到UI中,让UI生成新的WorkerThread就好,Firefox能够援助subworker,但Chrome是足以支撑sharework,这种shareworker能够分享JS文件之中的全局数据。作品转自:

Web Worker 有以下多少个应用注意点。

if(data && data.__THREAD_TASK__){ var task = data.__THREAD_TASK__; try{ var fn = (new Function;

正文由云 社区发表

this.sleep; } return sharedObj.i; }, function{ console.log("t2>" r.returnValue ":" r.error); });

2.4 错误管理

主线程能够监听 Worker 是不是发生错误。假诺发生错误,Worker 会触发主线程的error事件。

worker.onerror(function { console.log([ 'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message ].join; // 或者 worker.addEventListener('error', function { // ... });

Worker 内部也足以监听error事件。

复制代码 代码如下:function WorkerThread{ this._worker = new Worker; this._completes = {}; this._task_id = 0; this.sharedObj = sharedObj;

Worker 线程所在的全局对象,与主线程不意气风发致,不能够读取主线程所在网页的 DOM 对象,也回天乏术利用documentwindowparent那么些目的。不过,Worker 线程能够navigator对象和location对象。

能够观望任何经超过实际际上并不复杂,这么实现之后,那么些ThreadWorker能够有以下三种用法:

Web Worker 的功效,正是为 JavaScript 创设二十二线程意况,允许主线程创造Worker 线程,将某些职分分配给后代运营。在主线程运维的相同的时间,Worker 线程在后台运转,两个互不烦扰。等到 Worker 线程实现计算职分,再把结果回到给主线程。那样的益处是,一些考虑密集型或高延迟的职责,被 Worker 线程负责了,主线程(常常担当 UI 人机联作)就能很顺畅,不会被窒碍或拖慢。

function _run(){ ctx.threadSignal = true; var ret = fn.call; postMessage({error:null, returnValue:ret, __THREAD_TASK__:task, sharedObj:data.sharedObj, taskId: data.taskId}); }

操作系统 1img

复制代码 代码如下:var t1 = new WorkerThread({i: 100} /*shared obj*/);

Worker 线程和主线程不在同二个上下文境遇,它们不可能平昔通讯,必得经过音信达成。

复制代码 代码如下:var worker = new ThreadWorker(bundle /*shared obj*/);

JavaScript 语言使用的是单线程模型,也正是说,全体职务只好在一个线程上成功,三次只可以做大器晚成件事。前面包车型客车职务没做完,前边的天职只好等着。随着Computer计量技巧的巩固,特别是多核 CPU 的现身,单线程带给相当大的艰辛,相当的小概丰富发挥Computer的猜度技巧。

" sharedObj.i "

Worker 线程风流倜傥旦新建设成功,就能够始终运作,不会被主线程上的移位(比方客商点击按键、提交表单)打断。那样方便任何时候响应主线程的通讯。可是,那也诱致了 Worker 比较耗费能源,不应有过度使用,何况若是采用实现,就应该关闭。

复制代码 代码如下://in my.jsonmessage = function{ var data = evt.data; data.id ; postMessage; //{message:'Hello world', id:2}}

分红给 Worker 线程运营的剧本文件,必得与主线程的台本文件同源。

setInterval{ t1.run{ return sharedObj.i ; }, function{ console.log("t1>" r.returnValue ":" r.error); } ); }, 500);var t2 = new WorkerThread;

7.1 主线程

浏览器原生提供Worker()布局函数,用来供主线程生成 Worker 线程。

var myWorker = new Worker(jsUrl, options);

Worker()布局函数,能够接收八个参数。首个参数是本子的网站,该参数是少不了的,且不能不加载 JS 脚本,不然会报错。第四个参数是布署对象,该对象可选。它的二个效应就是钦命Worker 的称谓,用来区分多少个 Worker 线程。

// 主线程 var myWorker = new Worker('worker.js', { name : 'myWorker' }); // Worker 线程 self.name // myWorker

Worker()布局函数重返叁个 Worker 线程对象,用来供主线程操作 Worker。Worker 线程对象的习性和方法如下。

  • Worker.onerror:钦定 error 事件的监听函数。
  • Worker.onmessage:钦赐 message 事件的监听函数,发送过来的数量在Event.data属性中。
  • Worker.onmessageerror:钦赐 messageerror 事件的监听函数。发送的多少不恐怕连串化成字符串时,会触发那一个事件。
  • Worker.postMessage(State of Qatar:向 Worker 线程发送音信。
  • Worker.terminate(卡塔尔国:马上截止 Worker 线程。

地点这段代码定义了八个ThreadWorker对象,这么些指标成立了二个运转thread.js的Web Worker,保存了共享对象SharedObj,而且对thread.js发回的消息实行管理。

本文由ca88发布,转载请注明来源

关键词: 同事 文件 效率 线程 发送消息