返回 导航

HTML5 / CSS3

hangge.com

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

作者：hangge | 2017-07-19 08:10

一、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 来定期检测某个网站是否有新数据。
评论

全部评论（0）

回到顶部