参考教程：http://www.w3school.com.cn/html5/html_5_webworkers.asp

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

什么是 Web Worker？

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

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

创建 web worker 文件

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

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

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

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

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

创建 Web Worker 对象

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

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

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

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

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

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

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

终止 Web Worker

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

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

  1. w.terminate();
  2.  
  3. 完整代码
  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>
  1.  

HTML5学习(十)---Web Workers的更多相关文章

  1. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  2. JavaScript 学习笔记 - Web Workers

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

  3. HTML5新特性 Web Workers 实现多线程

    引子:(JS单线程) 什么是webworker? Web Worker为Web应用程序提供了一种能在后台中运行的方法.通过Web Worker可以生成多个线程同时运行,并保证页面对用户的及时响应,完全 ...

  4. HTML5学习笔记 Web存储

    HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...

  5. HTML5学习(八)----Web存储

    参考地址:http://www.w3school.com.cn/html5/html_5_webstorage.asp 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localS ...

  6. HTML5学习之Web存储

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...

  7. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  8. html5 Web Workers

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

  9. 【HTML5】Web Workers

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

随机推荐

  1. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  2. 【转】分享10VPN

    以下介绍的vpn,都是有免费流量赠送的免费vpn,完全不免费的不在之列. 免费vpn因为用的人比较多,所以高峰时段可能会有点慢,但是人少时,还是比较顺畅的.对于偶尔浏览外网,看看新闻的同学来说,免费v ...

  3. PyQt4学习笔记2：事件和信号

    事件是任何 GUI 程序中很重要的部分.所有 GUI 应用都是事件驱动的.一个应用对其生命期产生的不同的事件类型做出反应.事件是主要由应用的用户产生.但是,也可以通过其他方法产生,比如,网络通信,窗口 ...

  4. 在MVVMLight框架的ViewModel中实现NavigationService

    网上已经有很多方法了,比如通过Messenger来实现等等.这里我只讲述一种我比较喜欢的方法,因为它很方便 首先定义一个ViewModel基类,将所有ViewModel子类继承这个基类.在基类中定义 ...

  5. 1028. List Sorting (25)

    #include <vector> #include <stdio.h> #include <string.h> #include <algorithm> ...

  6. ENVI栅格文件增强后将LUT保存完输出img图像进行分类

    ENVI栅格文件储存 图像原始的DN（Digital Number）值记录图像的光谱信息，不能轻易更改。在窗口中显示的一般是经过拉伸等增强处理的LUT上的灰度值，在保存文件时，就有不同的方式。 1.  ...

  7. sort +awk+uniq 统计文件中出现次数最多的前10个单词

    实例cat logt.log|sort -s -t '-' -k1n |awk '{print $1;}'|uniq -c|sort -k1nr|head -100 统计文件中出现次数最多的前10个单 ...

  8. 在Hadoop分布式文件系统的索引和搜索

    FROM:http://www.drdobbs.com/parallel/indexing-and-searching-on-a-hadoop-distr/226300241?pgno=3 在今天的信 ...

  9. mac 如何让文件隐藏

    1.首先,要确保知道目标文件或文件夹的名称,你不把这个名称正确地输入到终端中,Mac也无能为力啊... 2.打开终端,输入chflags hidden 3.在上述代码的后面加上该文件夹的路径,但是注意 ...

  10. 三年PS经验