什么是 Web Worker？

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

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

计数器：

<!DOCTYPE html>

<html>

<body>

<p>计数: <output id="result"></output></p>

<button onclick="startWorker()">开始 Worker</button>

<button onclick="stopWorker()">停止 Worker</button>

<br /><br />

<script>

var w;

function startWorker()

{

if(typeof(Worker)!=="undefined")

  {

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

  if(typeof(w)=="undefined")

  {

  w=new Worker("/example/html5/demo_workers.js");

  }

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

  w.onmessage = function (event) {

    document.getElementById("result").innerHTML=event.data;

    };

  }

else

  {

  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";

  }

}

function stopWorker()

{

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

w.terminate();

}

</script>

</body>

</html>

【HTML5】Web Workers的更多相关文章

  1. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  2. 【html5】Web存储_locaStorage对象的应用

    Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...

  3. 【我的前端自学之路】【HTML5】Web Socket

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508118.html 什么是Web Socket WebSocket ...

  4. 【我的前端自学之路】【HTML5】web 存储

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...

  5. 【HTML5】Web存储

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

  6. 【HTML5】 web上的音频

    <!-- audio通过属性的设置可以控制音频播放的行为: 表6-2 audio元素的属性 ——————————————————————————————————————————————————— ...

  7. 【我的前端自学之路】【HTML5】.html和.htm的区别

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508171.html .htm 和 .html 的区别 .htm 和 ...

  8. 【python】web开发

    No1: hello.py def application(environ,start_response): start_response('200 OK',[('Content-Type','tex ...

  9. 【转载】Web Service和WCF的到底有什么区别

    [1]Web Service:严格来说是行业标准,也就是Web Service 规范,也称作WS-*规范,既不是框架,也不是技术. 它有一套完成的规范体系标准,而且在持续不断的更新完善中. 它使用XM ...

随机推荐

  1. Yacc 与 Lex 快速入门

    Yacc 与 Lex 快速入门 Lex 与 Yacc 介绍 Lex 和 Yacc 是 UNIX 两个非常重要的.功能强大的工具.事实上,如果你熟练掌握 Lex 和 Yacc 的话,它们的强大功能使创建 ...

  2. GTP （GPRS隧道协议(GPRSTunnellingProtocol)）

    GTP (GPRS隧道协议(GPRSTunnellingProtocol)) GTP (GPRS隧道协议(GPRSTunnellingProtocol)) 编辑 本词条缺少信息栏.名片图,补充相关内容 ...

  3. git基础知识总结

    1,clone git clone https://github.com/KoMiles/helloword helloword 2,pull git pull 3,commit git commit ...

  4. CF360B Levko and Array （二分查找+DP）

    链接:CF360B 题目: B. Levko and Array time limit per test 2 seconds memory limit per test 256 megabytes i ...

  5. 超常用的PHP正则表达式收集整理

    以下就是对超常用的PHP正则表达式进行的收集整理,为了方便大家更快更好的掌握php正则表达式. 一.表单验证匹配验证账号,字母开头,允许 5-16 字节,允许字母数字下划线:^[a-zA-Z][a-z ...

  6. Sublime text 3 中文文件名显示方框怎么解决？

    如图,中文文件名打开全是乱码,内容倒是装了converttoutf8没什么太大的问题. -------------------------------------------------------- ...

  7. [Effective JavaScript笔记]第1条：了解使用的js版本

    1997年 正式成为国际标准,官方名称为ECMAScript. 1999年 定稿第3版ECMAScript标准(简称ES3),最广泛的js版本. 2009年 发布第5版即ES5,引入了一些新特性,标准 ...

  8. 在线调试和演示的前端开发工具------http://jsfiddle.net/

    在线调试和演示的前端开发工具------http://jsfiddle.net/

  9. [BZOJ3624][Apio2008]免费道路

    [BZOJ3624][Apio2008]免费道路 试题描述 输入 输出 输入示例 输出示例 数据规模及约定 见“输入”. 题解 第一步,先尽量加入 c = 1 的边,若未形成一个连通块,则得到必须加入 ...

  10. Dynamic Morphing Square(动态变形矩阵)

    题目描述: 解题思路: 先对输入的N进行判断,是否不小于3,如果小于3,需要继续输入一个新的数,知道输入的N比3大. 第一个打印的矩阵,*号为最外面一圈,其余全为-. 第二个打印的矩阵,*号向内缩减了 ...