当前位置：首页 > news >正文

HTML5之 WebWorkers

news 来源：原创 2024/4/26 2:59:28

为了进行后台计算提供的完全隔离计算方式
不可访问 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);