HTML5之Worker用法

HTML5提供了Worker类用于多线程处理。Worker是在UI主线程中创建，后台执行的一段js脚本，它通过消息与UI线程传递数据。使用Worker就3步：

cheungmine 2011-11-29

第1步：创建一个Worker，需要指定一个js文件，作为Worker线程的执行体：

var worker = new Worker("worker.js");

第2步：给Worker实例指定消息处理函数，只有2个：onmessage ，onerror
    worker.onmessage = function (event) {
        // update UI here
        var t1 = new Date().getTime();
        elemById("_time").value = t1 - t0;
        elemById("_piValue").value = event.data;
    };

worker.onerror = function (event) {
alert(event.message);
};

第3步：给worker发消息：postMessage。

elemById("_time").value = "-";
t0 = new Date().getTime();
worker.postMessage(parseInt(elemById("_num_rects").value));

下面以一个具体的例子来说明Worker的用法。这个例子是用数值积分的方法求pi=(3.1415926....）的。worker.js就是做这个工作。

// worker.js
//   calculate pi using numerical integration
// 2011-11, cheungmine
self.onmessage = function (event) {// numerical integration to calc pivar num_rects = event.data;var width = 1.0/num_rects;var mid;var height;var sum = 0.0;var area;for (var i=0; i<num_rects; i++) {mid = (i+0.5) * width;height = 4.0/(1.0+mid*mid);sum += height;}area = width*sum; // area=pi// post message back to UI threadself.postMessage(area);
};

HTML5主页面js-test.html如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>js-test.html</title><script type="text/javascript">function elemById(id) {return document.getElementById(id);}function getBrowserAgent() {var browser = "$";if ((navigator.userAgent.indexOf('MSIE') >= 0) &&(navigator.userAgent.indexOf('Opera') < 0)){browser = "$IE";}else if (navigator.userAgent.indexOf('Firefox') >= 0){browser = "$FIREFOX";}else if (navigator.userAgent.indexOf('Opera') >= 0){browser = "$OPERA";}else if (navigator.userAgent.indexOf('Chrome') >= 0){browser = "$CHROME";}return browser;}var browser = getBrowserAgent();window.addEventListener('load', function () {if (browser=="$IE") {// MSIEif (window.confirm("IE does not support HTML5 currently.\n"+"please use lastest FireFox, Chrome or Opera!\n"+"if you havenot any of them installed,\n"+"please click OK to enter download page.")) {window.location.replace("selbrowser.html");}else {window.close();}}else if (browser=="$FIREFOX"||browser=="$CHROME") {// do stuff for FireFox and Chrome}else {// do stuff for others}initPage();},false);var dt = new Date();var t0 = 0;function initPage () {// onclickelemById("_piWorker").addEventListener('click',function(){var worker = new Worker("worker.js");worker.onmessage = function (event) {// update UI herevar t1 = new Date().getTime();elemById("_time").value = t1 - t0;elemById("_piValue").value = event.data;};worker.onerror = function (event) {  alert(event.message);  };  elemById("_time").value = "-";t0 = new Date().getTime();worker.postMessage(parseInt(elemById("_num_rects").value));},false);}</script>
</head>
<body><p>Press button "calc" to get pi</p><p><input type="input" size="10" id="_num_rects" value="100000000"><input type="button" id="_piWorker" value="calc">pi=<input type="input" size="30" id="_piValue" value="">time elapsed: <input type="input" size="10" id="_time" value="-"></p>
</body>
</html>

如果用户不小心用IE打开了主页面，我们需要提示用户目前IE还干不了这个活，下面的是下载支持HTML5的浏览器页面selbrowser.html：

<html>
<head><title>selbrowser.html</title>
</head>
<body><p><h4>Download the lastest HTML5 browser!</h4></p><table align="center"><tr><td width="200"><a href="http://www.mozilla.org/en-US/firefox/all.html"><h3>Mozilla FireFox</h3></a></td><td width="200"><a href="http://www.google.cn/chrome/eula.html?hl=zh-CN&platform=win"><h3>Google Chrome</h3></a></td><td width="200"><a href="http://www.opera.com/download/"><h3>Opera</h3></a></td></table>
</body>
</html>

好，全齐了。把上面3个文件放到同一个目录如：C:/myJSP/test下面：

test/js-test.html

test/worker.js

test/selbrowser.html

使用FireFox直接打开file:///C:/myJSP/test/js-test.html即可。目前FireFox8不支持http://localhost:8080/myJSP/test/js-test.html，会报Could not load domain错误。

但是FireFox Aurora支持，只是Worker计算速度超慢。

目前Chrome不支持Worker直接用file:///C:/myJSP/test/js-test.html方式打开，会报Uncaught Error: SECURITY_ERR: DOM Exception 18。

可以使用Chrome以http://localhost:8080/myJSP/test/js-test.html方式打开。需要建一个本地http server，如tomcat。

Opera两种方式都支持。

HTML5之Worker用法相关推荐

JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
HTML5 Web Worker
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
HTML5 autofocus属性用法简单介绍
本章节简单介绍一下HTML5中新增的一个属性autofocus,它可以让一个元素加载后获取焦点,在此之前一般要通过使用javascript的focus()方法实现我们的要求,非常的简单,代码如下: 1 ...
html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...
html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许没有 ...
主进程中发生了一个javascript错误_知道html5 Web Worker标准吗？能实现JavaScript的多线程？
js为什么是单线程? 主要是因为最开始javascript是单纯的服务于浏览器的一种脚步语言(那时候没有nodejs).浏览器是为了渲染网页,通过dom与用户交互,如果一个线程需要给dom执行clic ...
HTML5 Web Worker的使用
来源:feng_013 的博客 Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如 ...
html5 新标签用法,Html5新标签解释及用法
HTM.轻厅设近幸松.备近幸松.备近幸松.备近L 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏 ...
HTML5地理定位用法
定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explo ...
HTML5 Web Storage用法
早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中.HTML5的出现,极大地增加了开发人员的开发灵活度 ...

HTML5之Worker用法

HTML5之Worker用法

HTML5之Worker用法相关推荐

最新文章

热门文章