Javascript Worker子线程代码实例

Javascript Worker子线程代码实例完整攻略

在前端开发中，为了避免一些复杂的计算或者耗时操作影响到UI的性能，我们可以使用Web Worker来创建一个新的线程来执行这些计算。

Worker的特点

Web Worker是一种实现了多线程的JavaScript。它可以使得浏览器在后台运行独立的脚本线程，将一些需要较长时间才能运行完成的任务交给这些独立的线程来执行，从而不影响整个页面的响应。

Web Worker的使用

要使用Web Worker，我们需要调用Web Worker的构造器，如下所示：

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

构造器的参数是一个JavaScript脚本的文件名，该脚本将在Web Worker中运行。在这个脚本中，我们可以使用self对象来访问Web Worker上下文中的全局变量。

下面我们来看两个Web Worker的示例。

示例一：计算斐波那契数列

在主线程中，当用户点击按钮时，我们会创建Web Worker，然后将计算斐波那契数列的任务交给Web Worker来处理。Web Worker在完成计算后，将结果发送回主线程，并更新UI。

// index.html

<button id="btn">计算斐波那契数列</button>
<pre id="result"></pre>

<script>
  var btn = document.getElementById('btn');
  var result = document.getElementById('result');

  btn.onclick = function() {
    // 创建Web Worker
    var worker = new Worker('fib.js');

    // 当Web Worker完成计算后，将结果发送回主线程
    worker.onmessage = function(event) {
      result.textContent = event.data;
    };

    // 开始计算
    worker.postMessage(40);
  };
</script>


// fib.js

self.onmessage = function(event) {
  var n = event.data;
  var a = 1, b = 1;
  for (var i = 3; i <= n; i++) {
    var c = a + b;
    a = b;
    b = c;
  }
  // 将结果发送回主线程
  self.postMessage(b);
};

示例二：多个Web Worker协同处理

在这个示例中，我们创建多个Web Worker，每个Web Worker只计算其中一部分的结果。每个Web Worker计算完成后，将结果发送回主线程，并加入到总结果中。当所有Web Worker都计算完成后，主线程将会更新UI。

// index.html

<button id="btn">计算1到100000的质数之和</button>
<pre id="result"></pre>

<script>
  var btn = document.getElementById('btn');
  var result = document.getElementById('result');

  btn.onclick = function() {
    // 创建Web Worker
    var workerNum = 5;
    var workers = [];
    for (var i = 0; i < workerNum; i++) {
      var worker = new Worker('prime.js');
      workers.push(worker);
    }

    // 当所有Web Worker都计算完成时，将结果发送回主线程并更新UI
    var res = 0;
    var count = 0;
    function onWorkerDone(event) {
      count++;
      res += event.data;

      if (count === workerNum) {
        result.textContent = res;
        workers.forEach(function(worker) {
          worker.terminate();
        });
      }
    }

    // 开始计算
    var from = 1, to = 20000;
    var interval = Math.ceil((to - from + 1) / workerNum);
    for (var i = 0; i < workerNum; i++) {
      var start = from + i * interval;
      var end = Math.min(start + interval - 1, to);
      workers[i].onmessage = onWorkerDone;
      workers[i].postMessage({
        start: start,
        end: end
      });
    }
  };
</script>


// prime.js

function isPrime(n) {
  if (n < 2) {
    return false;
  }
  for (var i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) {
      return false;
    }
  }
  return true;
}

self.onmessage = function(event) {
  var start = event.data.start;
  var end = event.data.end;
  var sum = 0;
  for (var i = start; i <= end; i++) {
    if (isPrime(i)) {
      sum += i;
    }
  }
  // 将结果发送回主线程
  self.postMessage(sum);
};

以上就是使用Web Worker的两个示例。希望对你有所帮助！