HTML5 - 使用Web Worker执行后台任务（附：后台搜索素数样例）

2017-07-19 发布：hangge 阅读：1964

一、Web Worker 规范

1，产生背景

有时我们可能需要使用 JavaScript 执行一些复杂的任务，由于 js 代码始终在前台运行，因此那些耗费时间的代码会打断用户，阻塞页面，直到任务完成。这样对用户体验会造成很大的影响。
为解决 JavaScript 阻塞页面的问题，过去常会使用 setInterval() 或 setTime() 把大任务分成小任务，每次只运行一个小任务。这个方法在某些场景下是可行的，但对于不能拆分而又耗时很长的任务，这个办法会增加复杂性和困扰。

2，基本介绍

HTML5 提出了更好的解决方案：一个叫 Web Worker 的对象，它能够在后台完成工作。
对于那些比较费时的工作，可以创建一个新的 Web Worker 对象，把要运行的代码交给它，然后让它运行就好了。
在 Web Worker 工作期间，还可以通过传递文本消息这种安全且受限的方式与它通信。

Web Worker安全措施
使用 Web Worker 不必担心会发生两段代码争抢操作同一处数据的问题，因为它不允许在网页之间或 Web Worker 之间共享数据。
不过我们可以把数据从网页发送到 Web Worker（或者相反），但 JavaScript 会自动复制一份，并发送该副本。这就意味着不同的线程不能同时占用相同的内存区域。
这种简化的模型索然限制 Web Worker 的能力，但却换来了安全。

3，兼容性

（1）桌面浏览器

Chrome：完美支持
Firefox：完美支持
Safari：完美支持
IE：IE10 起开始支持（包括后面的 Edge 也支持）
Opera：完美支持

（2）移动设备

iOS：iOS 5.1 起开始支持
Android：Andorid 4.4 起开始支持

4，测试当前浏览器是否支持

通过测试是否存在 window.Worker，可以判断出浏览器是否支持 Web Worker。

if(window.Worker) {
   alert("当前浏览器支持 Web Worker。");
}else{
   alert("当前浏览器不支持 Web Worker。");
}

二、Web Worker 使用说明

1，Worker 对象

Web Worker 协议定义了一个新对象：Worker。我们在需要后台执行任务时，可以创建一个新的 Worker，交给它一些代码，然后发送给它一些数据。

比如下面这行代码创建了一个新的 Worker 对象，让它执行 PrimeWorker.js 中的代码。

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

2，数据传输

网页与 Worker 之间通过消息来沟通：

给 Worker 发送消息要使用该对象的 postMessage() 方法，Worker 那边会通过 onmessage 事件接收到该数据的一个副本。
如果 Worker 需要跟网页对话，它可以调用自己的 postMessage() 方法，并带上一些数据。网页同样是在 onmessage 事件中接收这些数据。

3，处理 Worker 错误

如果后台脚本遇到问题或者因为数据无效出现错误，Worker 会把打包的错误数据发送给网页。通过 onerror 事件告诉网页有错误发生。

worker.onerror = workerError;
function workerError(error) {
  statusDisplay.innerHTML = error.message;
}

错误对象中包含如下三个属性：

message：错误消息
lineno：错误所在的行号
filename：文件的名字

4，取消后台任务

要停止 Worker 工作的方式有如下两种：

一种是 Worker 对象调用自己的 close() 方法.
另一种是创建 Worker 对象的页面调用该对象的 terminate() 方法。

5，在 Worker 中使用另一个 JS 文件中的代码

这个可以使用 importScripts() 函数实现。比如我们需要在一个 Worker 内调用 findPrimes.js 文件中的函数，只需添加如下代码将其引入即可：

importScripts("findPrimes.js");

三、一个待改造样例（未使用 Web Worker）

1，效果图

（1）在输入框中填写一个区间范围后点“搜索”按钮，程序便会搜索出该区间内所有的素数，并显示在下方区域。

（2）当我们选择的区间很窄（1 ~ 50000），任务很快就能完成。

（3）但如果范围很大时（1 ~ 5000000），会导致页面数分钟没有反应，整个页面死在哪里，无法操作。

2，样例代码

（1）主页面（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hangge.com</title>
  <script src="FindPrimes.js"></script>
  <style>
    #primeContainer {
      border: solid 1px black;
      padding: 3px;
      height: 300px;
      max-width: 500px;
      overflow: scroll;
      overflow-x: hidden;
      font-size: x-small;
    }

    input {
      width: 70px;
    }

    p {
      margin-bottom: 25px;
    }
  </style>
  <script>
    //搜索按钮点击
    function doSearch() {
      //取得指定搜索区间的两个数据
      var fromNumber = document.getElementById("from").value;
      var toNumber = document.getElementById("to").value;

      //执行搜索（花的时间主要在这里，该方法保存在FindPrimes.js文件中）
      var primes = findPrimes(fromNumber, toNumber);

      //遍历素数数组，把它们转成一个长字符串
      var primeList = "";
      for (var i=0; i<primes.length; i++) {
        primeList += primes[i];
        if (i != primes.length-1) primeList += ", ";
      }

      //把素数字符串插入页面中
      var primeContainer = document.getElementById("primeContainer");
      primeContainer.innerHTML = primeList;

      //更新状态消息，告诉用户当前情况
      var statusDisplay = document.getElementById("status");
      if (primeList.length == 0) {
        statusDisplay.innerHTML = "未找到任何结果！";
      }
      else {
        statusDisplay.innerHTML = "搜索完毕！";
      }
    }
  </script>
</head>
<body>
  <p>
    要搜索的范围：<input id="from" value="1"> 至 <input id="to" value="50000">
    <button onclick="doSearch()">搜索</button>
  </p>
  <div id="primeContainer">
  </div>
  <div id="status"></div>
</body>
</html>

（2）上面代码中查找素数的任务是一个名叫 findPrimes() 的函数完成的，该函数保存在另一个 JavaScript 文件中（FindPrimes.js）。文件内容如下：

//搜索指定区间范围的素数
function findPrimes(fromNumber, toNumber) {

  // Create an array containing all integers between the two specified numbers.
  var list = [];
  for (var i=fromNumber; i<=toNumber; i++) {
    if (i>1) list.push(i);
  }

  // Test for primes.
  var maxDiv = Math.round(Math.sqrt(toNumber));
  var primes = [];

  for (var i=0; i<list.length; i++) {
    var failed = false;
    for (var j=2; j<=maxDiv; j++) {
      if ((list[i] != j) && (list[i] % j == 0)) {
        failed = true;
      } else if ((j==maxDiv) && (failed == false)) {
        primes.push(list[i]);
      }
    }
  }

  return primes;
}

四、功能改造：把任务放在后台执行

1，效果图

（1）在输入框中填写一个区间范围后点“搜索”按钮，程序便会搜索出该区间内所有的素数，并显示在下方区域。

（2）由于是在后台搜索，搜索过程中页面仍然保持响应，不会卡死。同时下方还会当前进度。

（3）增加了个“取消”按钮，点击后会取消后台任务，停止搜索。

2，样例代码

（1）Worker 任务代码（PrimeWorker.js）

//onMessage事件处理
onmessage = function(event) {
  //网页发过来的对象保存在evnet.data属性中，获取并在该范围内搜索素数
  var primes = findPrimes(event.data.from, event.data.to);

  //搜索完成，把结果发回网页
  postMessage(
   {messageType: "PrimeList", data: primes}
  );
};

//搜索指定区间范围的素数
function findPrimes(fromNumber, toNumber) {
  // Create an array containing all integers between the two specified numbers.
  var list = [];
  for (var i=fromNumber; i<=toNumber; i++) {
    if (i>1) list.push(i);
  }

  // Test for primes.
  var maxDiv = Math.round(Math.sqrt(toNumber));
  var primes = [];

  var previousProgress;

  for (var i=0; i<list.length; i++) {
    var failed = false;
    for (var j=2; j<=maxDiv; j++) {
      if ((list[i] != j) && (list[i] % j == 0)) {
        failed = true;
      } else if ((j==maxDiv) && (failed == false)) {
        primes.push(list[i]);
      }
    }

    //计算进度百分比
    var progress = Math.round(i/list.length*100);

    //只在进度变化超过1%时才发送进度百分比信息
    if (progress != previousProgress) {
      postMessage(
       {messageType: "Progress", data: progress}
      );
      previousProgress = progress;
    }
  }

  return primes;
}

（2）主页代码（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hangge.com</title>
  <script src="PrimeWorker.js"></script>
  <style>
    #primeContainer {
      border: solid 1px black;
      padding: 3px;
      height: 300px;
      max-width: 500px;
      overflow: scroll;
      overflow-x: hidden;
      font-size: x-small;
    }

    input {
      width: 70px;
    }

    p {
      margin-bottom: 25px;
    }
  </style>
  <script>
    //Web Worker对象
    var worker;
    //搜索按钮
    var searchButton;
    //状态显示区域
    var statusDisplay;

    //页面加载完毕
    window.onload = function() {
      searchButton = document.getElementById("searchButton");
      statusDisplay = document.getElementById("status");
    };

    //搜索按钮点击
    function doSearch() {
      //开始搜索时先禁用按钮，防止同时进行多个搜索
      searchButton.disabled = true;

      //取得数值范围，发送给Web Worker
      var fromNumber = document.getElementById("from").value;
      var toNumber = document.getElementById("to").value;

      //创建新的Worker
      worker = new Worker("PrimeWorker.js");
      //指定onMessage事件，以便从Worker那里收到消息
      worker.onmessage = receivedWorkerMessage;
      //指定onError事件，处理Worker错误
      worker.onerror = workerError;
      //将数值范围发送给Web Worker
      worker.postMessage(
       { from: fromNumber,
         to: toNumber
       }
      );

      //搜索开始提示
      statusDisplay.innerHTML = "web worker任务开始，搜索范围("+
       fromNumber + " 到 " + toNumber + ") ";
    }

    //处理Worker发送过来的消息数据
    function receivedWorkerMessage(event) {
      //取得发送过来的对象
      var message = event.data;

      //判断是那种类型的消息（PrimeList：搜索完毕。Progress：上报进度）
      if (message.messageType == "PrimeList") {
        //取得素数数组列表
        var primes = message.data;

        //遍历素数数组，把它们转成一个长字符串
        var primeList = "";
        for (var i=0; i<primes.length; i++) {
          primeList += primes[i];
          if (i != primes.length-1) primeList += ", ";
        }

        //把素数字符串插入页面中
        var displayList = document.getElementById("primeContainer");
        displayList.innerHTML = primeList;

        //更新状态消息，告诉用户当前情况
        if (primeList.length == 0) {
          statusDisplay.innerHTML = "未找到任何结果！";
        }
        else {
          statusDisplay.innerHTML = "搜索完毕！";
        }

        //启动搜索功能
        searchButton.disabled = false;
      }
      else if (message.messageType == "Progress") {
        //报告当前进度
        statusDisplay.innerHTML = "当前进度：" + message.data + "%";
      }
    }

    //当Worker发生错误时在页面上显示错误信息
    function workerError(error) {
      statusDisplay.innerHTML = error.message;
    }

    //取消按钮点击
    function cancelSearch() {
      //停止任务
      worker.terminate();
      worker = null;
      statusDisplay.innerHTML = "";
      searchButton.disabled = false;
    }
  </script>
</head>
<body>
  <p>
    要搜索的范围：<input id="from" value="1"> 至 <input id="to" value="50000">
    <button id="searchButton" onclick="doSearch()">搜索</button>
    <button onclick="cancelSearch()">取消</button>
  </p>
  <div id="primeContainer">
  </div>
  <div id="status"></div>
</body>
</html>

五、高级技巧

上面的素数搜索页面只是一个演示 Web Worker 如何使用的简单样例。在实际开发中，页面通常不会这么简单。下面是 Web Worker 的一些进阶用法。

1，在多个任务中重用 Web Worker

Worker 对象完成既定任务，触发 onmessage 事件处理程序后并不会被销毁。它只会闲置在那儿，等待新的任务。如果你再给它发送新的消息，它会马上进入状态，投入新的工作

2，创建多个 Web Worker

一个页面并不限于只能创建一个 Worker 对象。比如，若要支持访客同时搜索多个区间内的素数，就需要为每个搜索单独创建一个 Worker，然后通过数组来跟踪它们。这样，每当有 Worker 返回结果，就可以把结果添加到页面中，同时注意不覆盖其他 Worker 的结果。（为了稳妥起见，还是建议大家少创建 Web Worker，它们都不是“省油的灯"，一次运行太多会拖慢计算机。

3，在一个 Web Worker 中创建另一个 Web Worker

每个 Web Worker 都可以创建自己的 Web Worker，向它们发送消息，从它们那里接收消息。对于复杂的计算任务，比如计算斐波那契数这种需要递归的计算，在 Worker 内创建 Worker 便可以派上用场。

4，通过 Web Worker 下载数据

Web Worker 可以使用 XMLHttpRequest 对象取得新页面，或者向 Web 服务发送请求。取得了所需的信息后，它们可以调用 postMessage() 方法，把数据发回页面。

5，利用 Web Worker 执行周期性任务

与普通网页中的脚本一样， Web Worker 也可以调用 setTimeout() 或 setlnterval() 函数。因此，可以通过 Web Worker 来定期检测某个网站是否有新数据。