Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

检测 Web Worker 支持

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

  1. if (typeof(Worker) !== "undefined") {
  2.                 // 是的！支持 Web worker！
  3.                 alert("支持 ")
  4.                     // 一些代码.....
  5.             } else {
  6.                 // 抱歉！不支持 Web Worker！
  7.                 alert("不支持")
  8.             }
  9.         }

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。

在此处，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：

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

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

现在我们已经有了 web worker 文件，我们需要从 HTML 页面调用它。

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：

  1. if (typeof(w) == "undefined") {
  2.     w = new Worker("demo_workers.js");
  3. }

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器：

  1. w.onmessage = function(event){
  2.     document.getElementById("result").innerHTML = event.data;
  3. };

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。

终止 Web Worker

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

  1. w.terminate();

复用 Web Worker

如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

  1. w = undefined;

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <body>
  4.  
  5.  <p>计数: <output id="result"></output></p>
  6.  <button onclick="startWorker()">开始 Worker</button>
  7.  <button onclick="stopWorker()">停止 Worker</button>
  8.  <br /><br />
  9.  
  10.  <script>
  11.  var w;
  12.  
  13.  function startWorker()
  14.  {
  15.  if(typeof(Worker)!=="undefined")
  16.    {
  17.    if(typeof(w)=="undefined")
  18.    {
  19.    w=new Worker("/example/html5/demo_workers.js");
  20.    }
  21.    w.onmessage = function (event) {
  22.      document.getElementById("result").innerHTML=event.data;
  23.      };
  24.    }
  25.  else
  26.    {
  27.    document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  28.    }
  29.  }
  30.  
  31.  function stopWorker()
  32.  {
  33.  w.terminate();
  34.  }
  35.  </script>
  36.  
  37.  </body>
  38.  </html>

Web Worker 和 DOM

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

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

HTML Web Workers的更多相关文章

  1. Web Workers

    在 Web Workers 中使用 postMessage 和 onmessage 首先,需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来,参数是需要在另一个线程 ...

  2. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  3. 3D拓扑自动布局之Web Workers篇

    2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似乎和最近高档会所被整改为普通茶馆是一样的 ...

  4. 【HTML5】Web Workers

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  5. HTML5学习(十)---Web Workers

    参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...

  6. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

  7. JavaScript 学习笔记 - Web Workers

    前言 本文仅是 Web Workers 的入门科普文章,不涉及太琐碎的知识点. 我们知道,在 Web Workers 出来之前,JavaScript 是单线程的.即使是 setTimeout 之类的看 ...

  8. (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event

    浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核            Trident内核,也是俗称的IE内核Chrome 浏览器内核            统称为 Chromium 内核或 ...

  9. 通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。

    Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...

  10. JavaScript是如何工作的：Web Workers的构建块 + 5个使用他们的场景

    摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

随机推荐

  1. day9_7.9 函数的定义

    一.基础 1.什么是函数? 函数就是工具,方便开发人员开发软件,非常简洁的工具. 函数的关键字是def 在函数的编写阶段,只检验其语法是否正确,不检验代码. 在函数的调用阶段,可以通过函数名+()来调 ...

  2. USACO Spinning Wheels

    洛谷 P2728 纺车的轮子 Spinning Wheels https://www.luogu.org/problemnew/show/P2728 JDOJ 1800: Spinning Wheel ...

  3. LG2578 「ZJOI2005」九数码游戏 bfs

    问题描述 LG2578 题解 用string+map去重. bfs即可. \(\mathrm{Code}\) #include<bits/stdc++.h> using namespace ...

  4. WPF 目录树绑定 与 遍历

    定义树节点,(编译环境VS2017) public class GBTreeNode : INotifyPropertyChanged { private string _deviceId = str ...

  5. Cobalt环境搭建及 Web开发注意事项

    一.在Linux系统上搭建Cobalt运行环境 Cobalt是一款开源轻量级HTML5/CSS/JS浏览器,旨在于用最少的CPU.GPU.RAM等资源消耗提供丰富的应用程序开发.为了使前端开发者验证自 ...

  6. http与tcp,udp的区别

    1.网络协议的概念 (1)在学习网络课程的时候,老师会讲iso七层模型,有应用层 表示层 会话层 传输层 网络层 数据链路层 物理层,其中http就属于应用层,tcp与udp是属于传输层,如图1.1( ...

  7. .NET Core：Json和XML

    (1)Json WebAPI默认使用Json格式,如果需要更改默认的Json设置在Startup的ConfigureServices方法中修改:services.AddMvc() .AddJsonOp ...

  8. Loj #2479. 「九省联考 2018」制胡窜

    Loj #2479. 「九省联考 2018」制胡窜 题目描述 对于一个字符串 \(S\),我们定义 \(|S|\) 表示 \(S\) 的长度. 接着,我们定义 \(S_i\) 表示 \(S\) 中第 ...

  9. 使用velero进行kubernetes灾备

    使用velero可以对集群进行备份和恢复,降低集群DR造成的影响.velero的基本原理就是将集群的数据备份到对象存储中,在恢复的时候将数据从对象存储中拉取下来.可以从官方文档查看可接收的对象存储,本 ...

  10. ubutun16.04 安装编译glog日志库

    glog 是一个 C++ 日志库,它提供 C++ 流式风格的 API.在安装 glog 之前需要先安装 gflags,这样 glog 就可以使用 gflags 去解析命令行参数(可以参见gflags ...