web worker

web worker 多开子线程,且这些子线程无I/O权限,只能为主线程分担一些诸如计算的任务

不足
worker内代码不能操作DOM(更新UI)
只能加载服务器的js文件且不能跨域加载JS
不是所有浏览器都支持这个特性

API
1. 主线程
①创建新的Worker
var worker = new Worker(“worker.js”)

②传递参数
worker.postMessage()

③接收消息
worker.onMessage = function(msg){}
worker.onmessageerror = function(msg){}

④异常处理
worker.onerror = function(err){}

⑤结束worker
worker.terminate()

2.worker线程
self.name: Worker 的名字。该属性只读,由构造函数指定。
self.onmessage:指定message事件的监听函数。
self.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。
self.close():关闭 Worker 线程。
self.postMessage():向产生这个 Worker 线程发送消息。
self.importScripts():加载 JS 脚本。


示例

index.html代码:

<!DOCTYPE html>
<html>
  <body>
    <p>Count numbers: <output id="result"></output></p>
    <button onclick="startWorker()">Start Worker</button>
    <button onclick="stopWorker()">Stop Worker</button>
    <input type="text" value="" />
    <script>
      var w;
      function startWorker() {
        if (typeof Worker !== 'undefined') {
          if (typeof w === 'undefined') {
            w = new Worker('demo_workers.js');
          }
          w.onmessage = function (event) {
            document.getElementById('result').innerHTML = event.data;
          };
        } else {
          document.getElementById('result').innerHTML = 'Sorry, your browser does not support Web Workers...';
        }
      }

      function stopWorker() {
        w.terminate();
      }
    </script>
  </body>
</html>

demo_workers.js代码:

function timedCount () {
  for (var i = 0; i < 10000000000; i++) {
    if (i % 100000 === 0) {
      postMessage(i);
    }
  }
}

timedCount();

运行结果:

原文地址:https://www.cnblogs.com/sghy/p/13529269.html