一点体会:
以前对于大计算量的应用为了使得界面不至于僵死,只有将任务分成子任务,用timeout 来分批运行
,其根本原因是 javascript本质是单线程的
,集中时间大计算量的话会使得界面失去响应 ,更常用的是 将任务传到server端快速运行,利用xhr读取server端结果 。
09-09-01:
setTimeout 方式只是相当于模拟了多线程,而不是真正的多线程,比如当今的多核处理器,真正的多线程可以利用运行在不同的core而真正并行执行加快运行效率,这种timeout模拟的方式就不行了哦,只能在一个core运行的。
如今最新的浏览器 firefox 3.5 为我们提供了新的计算方式:
Worker ,后台运行的一段javascript
,突破了javascript的单线程模式,但是worker不可以动用界面操作,同java swing类似,界面操作仍然要单线程,worker 通过消息传递,将结果传给主线程,只有主线程才能进行界面操作,实现UI和处理线程分离。
举个例子:
两个文件 : html ,javascript(worker.js) 。由html中javascript 传递消息给worker
调用端:
<h1>请用 firefox 3.5 运行</h1>
<p>由于 javascript 的单线程特性,以前计算量很大的话就要放在server端运行,利用xhr回调取的结果,
<br/><br/>
现在也可以在client 后台运行了 ,界面不会僵死,但是 worker 不能进行界面dom操作,界面操作单线程保证
<br/>
</p>
<button id="test" > 后台worker运行 </button>
<button id="test2" > 当前线程运行 </button>
<div id="status" style="border:1px green solid;margin:10px;height:100px;color:red;">
</div>
<script type="text/javascript">
//将要后台运行的一段代码
var worker = new Worker("worker.js");
//后台worker返回的结果
worker.onmessage = function(ev){
document.getElementById("status").innerHTML="后台worker计算完毕:结果:<br />" +ev.data;
}
document.getElementById("test").onclick=function(){
alert("后台worker将要进行 1 ~ 1000000000 的遍历 ,但是界面不会僵死,点确定后等一会后台worker会返回信息");
document.getElementById("status").innerHTML="后台worker计算中 .....";
//将消息发给后台计算,主界面仍然可以操作,不会僵死
worker.postMessage(1);
};
document.getElementById("test2").onclick=function(){
document.getElementById("status").innerHTML="";
alert("当前线程运行将要进行 1 ~ 1000000000 的遍历 ,点确定后,界面将要僵死");
for(var i=0;i<1000000000;i++);
document.getElementById("status").innerHTML="当前线程 计算完毕:结果:<br /> 2";;
};
</script>
后台 worker.js :
//得到主线程传过的消息
onmessage = function(ev){
for(var i=0;i<1000000000;i++);
//将结果传递给主线程,注意不可以进行界面操作,不可以访问主线程页面数据,只能访问消息数据
postMessage( "来自 worker " + (parseInt(ev.data)+1) );
};
09-09-01:
上面所说的 xhr 实际上就是 web worker ,只不过它具有不同的特定任务的socket API (from even faster websites)
分享到:
相关推荐
deThread分布式计算的应用库利用JavaScript, WebSockets和web workers在浏览器中
WebWorkers,一个新的JavaScript编程模型,可以提高您web应用程序的交互性。...瓶颈包括JavaScript和后台I/O庞大的计算量,这需要从主UI显示流程中移除,交给WebWorkers处理。WebWorkers规范提供不依赖任何
使用WebWorkers(浏览器)实现的异步计算和多线程。 尚无测试。 请参阅示例文件夹中的example 。 支持回归和分类任务比现有的JS实现更快支持同步和异步模式排列特征的重要性线程支持(WebWorkers) JS中带有WASM的...
WebWorkers分配计算或其他工作交给了谷歌科技展2012我个人的条目,旨在缓解服务器上的工作负载客户。 类似于 P2P 文件共享,客户端连接到服务器创建一个独立于主站点运行的 WebWorker,因此服务器通过 WebSockets 与...
对于SVG,WebWorkers计算“路径”字符串并将其传递回主线程: : 对于Canvas,简单的代理用于记录WebWorker中的操作,因此可以在主线程上进行回放: : (基于的方法) 在我的测试中,结果好坏参半: 正面: ...
康威的人生游戏技术库存香草 JavaScript OOP 用于绘图的 HTML5 Canvas 用于繁重计算的 HTML5 Web Workers 用于表单交互的 jQuery描述康威的人生游戏在我心中占有特殊的位置。 我编写的第一个重要程序是用 Python ...
pi-web-worker 使用Monte Carlo模拟和Web Workers计算Pi编号
浏览器中的Web Workers与Promises一起工作为什么与Web Workers一起工作很有趣,因为它使以前仅适用于本机软件的内容也可以在Web上使用。 但是多线程很难正确处理,这就是为什么我使用模式来保持正确。 这些模式先前...
通过Clouldflare Workers和CouchDB将Web应用程序推向全球 这是此博客中描述的源代码回购:
JavaScript Web Workers,Chrome Native Client(NaCl)和WebGL着色器的算法艺术作品 这位前 -Kollege ,谁现在是一名数学教授,在1995年已决定一个很好的算法,通过色彩空间转换的图形是让人联想到现代艺术点菜...
这是一个库,用于使用HTML5功能(例如Canvas,WebWorkers,WebGL和SVG(正在进行中)或Node.js中的类似物)以纯JavaScript处理图像/视频。 版本0.9.6 / / / / / 也可以看看: 为节点/ XPCOM / JS,PHP,...
Javascript很慢,因此我们希望拥有尽可能多的主要处理能力,以便进行游戏相关的计算,图形渲染并达到60 FPS。 对于多人游戏来说,达到60 FPS的过程变得更加复杂,因为通过WebSockets传输数据是一项缓慢的操作。它还...
速度测试 一种自托管的轻量级速度测试,该测试基于JavaScript并基于和。...不建议使用服务器压缩,这会增加计算开销 配置 您可以根据需要配置速度测试服务器。 在服务器的根级别通过文件config.json查找可配置
speedy-vision.js 使用speedy-vision.js (一种用于JavaScript的GPU加速的计算机视觉库)构建实时内容。特征特征检测哈里斯角落探测器快速特征检测器ORB功能描述符BRISK特征检测器和描述符(很快) 功能追踪LK光流...
结果将使用志愿者的计算能力进行计算。 可以使用 Web 应用程序或通过为其提供 Java 包装器库 ( RestClient ) 的 HTTP API 添加任务和作业。 用户只需在浏览器中打开志愿者页面即可成为志愿者。 计算将在后台使用 web...
使用本地计算机测试您的Cloudflare Workers应用程序。 该软件包配置了一个沙箱Cloudflare环境,适合在本地运行和测试您的工作程序代码。 安装 $ npm install -D cloudflare-workers-sandbox 用法 npx sbox /path/to...
发电机服务工人 生成器入门什么是约曼?... 要从 npm 安装 generator-service-workers,请运行: npm install -g generator-service-workers 最后,启动生成器: yo Service Workers认识约曼约曼有一
Web Workers使开发人员可以将计算量大的任务分担给单独的线程,从而不会阻止主UI线程执行其他重要工作(例如,响应用户交互)。 工作者可以通过postMessage与主线程进行通信,并可以通过BroadcastChannel与彼此进行...