首页前端开发HTMLHTML5 web worker简介

HTML5 web worker简介

时间2024-01-25 13:28:12发布访客分类HTML浏览341
导读:收集整理的这篇文章主要介绍了html5教程-HTML5 web worker简介,觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 HTML5 web...
收集整理的这篇文章主要介绍了html5教程-HTML5 web worker简介,觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

HTML5 web worker就像在java中新建一个thread一样,创建一个独立的环境运行计算量比较大的程序,于目前来说还是没有太大的用武之地,但是估计以后可能用途比较大。
基本的代码很简单:
[htML] 
VAR worker = new Worker('doWork.js');  
 
worker.addEventListener('message', function(e) {  
  console.@R_406_2869@('Worker said: ', e.data);  
} , false);  
 
worker.postMessage('Hello World'); // Send data to our worker. 

doWork.js
[html] 
self.addEventListener('message', function(e) {  
  self.postMessage(e.data);  
} , false);  


要注意的是在页面里我们需要建立双向通讯机制:postMessage和 addEventListener (in page we need postMessage() to post IT to worker and onmessage to receive From worker)
在worker.js中也要建立双向通讯机制 (in worker we also need postMessage to post it to page and on message to receive from page)

其他要注意的是error handling和如果你不想建立单独的worker.js也可以使用FileURL建立 (use objectURL to load worker in the same page)

[html] 
// PRefixed in webkit, Chrome 12, and FF6: window.WebKitBlobBuilder, window.MozBlobBuilder 
var bb = new BlobBuilder();  
bb.apPEnd("onmessage = function(e) { postMessage('msg from worker'); } ");  
 
// OBTain a blob URL reference to our worker 'file'. 
// Note: window.webkitURL.createObjectURL() in Chrome 10+. 
var blobURL = window.URL.createObjectURL(bb.getBlob());  


作者:baoeni

HTML5 web worker就像在java中新建一个thread一样,创建一个独立的环境运行计算量比较大的程序,于目前来说还是没有太大的用武之地,但是估计以后可能用途比较大。
基本的代码很简单:
[html] 
var worker = new Worker('doWork.js');  
 
worker.addEventListener('message', function(e) {  
  console.log('Worker said: ', e.data);  
} , false);  
 
worker.postMessage('Hello World'); // Send data to our worker. 

doWork.js
[html] 
self.addEventListener('message', function(e) {  
  self.postMessage(e.data);  
} , false);  


要注意的是在页面里我们需要建立双向通讯机制:postMessage和 addEventListener (in page we need postMessage() to post it to worker and onmessage to receive from worker)
在worker.js中也要建立双向通讯机制 (in worker we also need postMessage to post it to page and on message to receive from page)

其他要注意的是error handling和如果你不想建立单独的worker.js也可以使用FileURL建立 (use objectURL to load worker in the same page)

[html] 
// Prefixed in Webkit, Chrome 12, and FF6: window.WebKitBlobBuilder, window.MozBlobBuilder 
var bb = new BlobBuilder();  
bb.append("onmessage = function(e) { postMessage('msg from worker'); } ");  
 
// Obtain a blob URL reference to our worker 'file'. 
// Note: window.webkitURL.createObjectURL() in Chrome 10+. 
var blobURL = window.URL.createObjectURL(bb.getBlob());  


作者:baoeni

觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

divHTMLhtml5post-format-gallery

若转载请注明出处: HTML5 web worker简介
本文地址: https://pptw.com/jishu/586574.html
HTML5一步一步走――新标签讲解(一) HTML5之WebSocket

游客 回复需填写必要信息