首页 > 代码库 > HTML5之 WebWorkers

HTML5之 WebWorkers

2024-10-23 01:05:01   210人阅读

为了进行后台计算提供的完全隔离计算方式
不可访问 DOM APIs
不可访问 window object
不可访问 document object
强隔离保证并行计算结果无误(无锁机制)

---- 启动

定义Worker对象
var w = new Worker("calc.js");
Worker会占用比非Worker模式更多内存
硬件好,效率高

---- 通信

Message事件用于和调用方通信
addEventListener(‘message‘,function(evt){});

postMessage()用于向Worker发消息
w.postMessage(imgData);

数据会被格式化成为JSON格式
每次发送都是源对象的copy,对象大,性能降低明显

---- Worker 可访问接口

SetTimeout()/clearTimeout()
setInterval()/clearInterval()
importScripts()引入其它JS文件
可以读取url
可以发送xmlhttprequest
Shared worker 共享数据

---- 算闰年的示例

1. HTML 设计

<form name="stepForm">    选择速度：    <select name="step">    <option value="1">1 sec</option>    <option selected="" value="10">10 sec</option>    <option value="60">1 min</option>    <option value="120">2 min</option>    </select>    <p>Jahr-Monat: <span id="y">0</span></p>    <input id="start" type="button" onclick="startCalc();" value="Start">     <input id="stop" type="button" onclick="stopCalc();" value="Stop">       <pre id="cnt"></pre>   </form>

2. JS的 设计

window.onload = function() {    var opts = document.forms.stepForm.step.options;    // 开始事件    startCalc = function() {      var step = opts[opts.selectedIndex].value;      var w = new Worker(‘date_worker.js‘);    // 创建 Worker 对象      // 发数据到woker      w.postMessage(step);      $("start").disabled = ‘disabled‘;      // 返回数据触发事件      w.onmessage = function(evt) {        if (evt.data.substr(0,2) == "y ") {          $("y").innerHTML = evt.data.substr(2);        } else {          $("cnt").innerHTML += "Schaltjahr: "+evt.data+"\n";        }      }      // 服务停止事件      stopCalc = function() {        w.terminate();    // 中断连接        $("start").removeAttribute("disabled");      }    }}

3. date_worker.js 设计

addEventListener(‘message‘, function(evt) {  var today = new Date();  var oldMonth = -1;  // evt.data 即传进来的参数  for (var i=0; i<today; i+=Number(evt.data)*1000) {    var d = new Date(i);    if (d.getDate() == 29 && d.getMonth() == 1       && d.getHours() == 12 && d.getMinutes() == 0) {      // 返回数据      postMessage(d.toLocaleString());    }    if (d.getMonth() != oldMonth) {      // 返回数据      postMessage("y "+d.getFullYear()+"-" +(d.getMonth()+1));      oldMonth = d.getMonth();    }  }}, false);

 

HTML5之 WebWorkers


联系
我们