UDN-企业互联网技术人气社区
UDN 企业互联网技术社区 前端精选 HTML5精选 JavaScript多线程之HTML5 Web Worker

JavaScript多线程之HTML5 Web Worker

葡萄柚 论坛 2016-5-3 14:10
分享到:
摘要: 在这个JavaScript文件中,利用new Worker('fibonacci.js')方式来创建Web Worker对象,并利用Worker对象上的postMessage方法发送请求计算请求,以及利用Worker对象的onmessage的方法接受Worker线程的返回结果,并显示 ...
1.jpg

  例如在JavaScript中尝试计算像fibonacci这类计算密集型的操作,就会导致整个页面体验被blocked。HTML5 Web Worker的出现让我们在不阻塞当前JavaScript线程的情况下,在当前的JavaScript执行线程中可利用Worker这个类新开辟一个额外的线程来加载和运行特定的JavaScript文件,这个新的线程和JavaScript的主线程之间并不会互相影响和阻塞执行的;并且在Web Worker中提供这个新线程和JavaScript主线程之间数据交换的接口:postMessage和onmessage事件。它和C# WinForm中的BackgroundWorker很类似。

  Web Worker实现fibonacci计算

  利用HTML5 Web Worker实现fibonacci可像如下所示(plnkr在线demo):
  1.   fibonacci.js Worker JavaScript文件:
  2. (function() {
  3.   var fibonacci = function(n) {
  4.     return n
复制代码

  在fibonacci.js中利用onmessage方法来监听主线程发送的fibonacci计算请求,和利用postMessage返回计算的结果到请求线程。

  script.js 主线程JavaScript文件:
  1. $(function() {
  2.   var $input = $('#input'),
  3.     $btn = $('#btn'),
  4.     $result = $('#result'),
  5.     worker = new Worker('fibonacci.js'),
  6.     timeKey = function(val) {
  7.       return 'fibonacci(' + val + ')';
  8.     };

  9.   worker.onmessage = function(event) {
  10.     console.timeEnd(timeKey(event.data.input));
  11.     $result.text(event.data.result);
  12.   };

  13.   $btn.on('click', function() {
  14.     var val = parseInt($input.val(), 10);
  15.     if (val) {
  16.       console.time(timeKey(val));
  17.       $result.text('?')
  18.       worker.postMessage(val);
  19.     }
  20.   });
  21. });
复制代码

  在这个JavaScript文件中,利用new Worker('fibonacci.js')方式来创建Web Worker对象,并利用Worker对象上的postMessage方法发送请求计算请求,以及利用Worker对象的onmessage的方法接受Worker线程的返回结果,并显示在UI界面上。同时我们也利用了console最新的time API来统计计算所花费的时间。

  其显示效果如下:
2.png

  在console中打印的时间信息为:
  1. fibonacci(10): 1.022ms
  2. fibonacci(20): 1.384ms
  3. fibonacci(30): 22.065ms
  4. fibonacci(40): 1744.352ms
  5. fibonacci(50): 202140.027ms
复制代码

  从这里时间输出可以看出,在计算n为40的fibonacci 开始时间开始急速的加长,在UI中返回结果的时间也逐渐变长;但是在Web Worker后台计算的时候,它并不会阻塞我们的UI界面的其他交互。

  Web Worker总结

  Web Worker在这类耗时计算密集型操作中,显得特别实用。在Web Worker中我们可以实现:

  • 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信;
  • 可以在worker中通过importScripts(url)加载另外的脚本文件;
  • 可以使用 setTimeout(),clearTimeout(),setInterval(),clearInterval();
  • 可以使用XMLHttpRequest来发送请求,以及访问navigator的部分属性。

  但是它也存在一些来自浏览器安全沙盒的限制:

  • 不能加载跨域的JavaScript文件;
  • 如文件开始所说,考虑到JavaScript操作DOM的安全性问题,在Web Worker中不能访问界面中的DOM信息,对于DOM的访问操作都必须委托给JavaScript主线程来操作;因此HTML5 Web Worker的出现的出现,并没有改变JavaScript单线程执行的这个事实;

  还有就是Web Worker的浏览器兼容性问题。它的浏览器兼容性图如下:
2.png

相关阅读

分享到:
已有2条评论

最新评论

←不死魔頭←
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
海妖
js太强大了,好多工作前端都可以做了…

一周焦点

关注我们:
关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
返回顶部