Web worker 是运行在后台的 JavaScript，不会影响页面的性能。
**
HTML5提出了Web Worker，它会在当前的js执行主线程中开辟出一个额外的线程来运行js文件，这个新的线程和js主线程之间不会互相影响，同时提供了数据交换的接口：postMessage和onMessage

但是因为它创建的子线程完全受控于主线程，且位于外部文件中，无法访问DOM。所以它并没有改变js单线程的本质。
**

检测 Web Worker 支持

在创建 web worker 之前，请检测用户浏览器是否支持它：

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。
在此处，我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中：

  1. var i = 0;
  3. function timedCount() {
  4.     i = i + 1;
  5.     postMessage(i);
  6.     setTimeout("timedCount()",500);
  7. }
  9. timedCount();

创建 Web Worker 对象

现在我们已经有了 web worker 文件，我们需要从 HTML 页面调用它。
下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>HTML5</title>
  9.     <link href="https://fonts.googleapis.com/css?family=Lato:400,400i|Roboto:500" rel="stylesheet">
  10.     <!-- 为 Internet Explorer 支持而添加的 shiv -->
  11.     <!--[if lt IE 9]>
  12. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  13. <![endif]-->
  14.     <style>
  15.     </style>
  16. </head>
  18. <body>
  19.     <p>Count numbers: <output id="result"></output></p>
  20.     <button onclick="startWorker()">Start Worker</button>
  21.     <button onclick="stopWorker()">Stop Worker</button>
  22.     <br><br>
  23. </body>
  24. <script>
  25.     var w;
  27.     function startWorker() {
  28.         if (typeof (Worker) !== "undefined") {
  29.             console.log("是的！支持 Web worker");
  30.             if (typeof (w) == "undefined") {
  31.                 w = new Worker("demo_workers.js");
  32.             }
  33.             w.onmessage = function (event) {
  34.                 document.getElementById("result").innerHTML = event.data;
  35.             };
  36.         } else {
  37.             console.log("抱歉！不支持 Web Worker！")
  38.             document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  39.         }
  40.     }
  42.     function stopWorker() {
  43.         w.terminate();
  44.         w = undefined;
  45.     }
  47. </script>
  49. </html>

Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

  • window 对象
  • document 对象
  • parent 对象