什么是 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. android-android各大手机系统打开权限管理页面

    android系统五花八门,当我们去请求用户的权限的时候,总是会弹出是否允许的对话框. 而且用户一旦不小心点了拒绝,下次就不再询问了,而很多小白用户也不知道怎么去设置.这就导致了很不好的用户体验. 经 ...

  2. APN APN指一种网络接入技术，是通过手机上网时必须配置的一个参数，它决定了手机通过哪种接入方式来访问网络。

    apn 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . APN指一种网络接入技术,是通过手机上网时必须配置的一个参数,它决定了手机通过哪种接入方式来访问网络. 对于手机用户来说,可 ...

  3. Gulp， 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

  4. Hadoop之 hdfs 系统

    一.NameNode维护着2张表: 1.文件系统的目录结构,以及元数据信息 2.文件与数据块列表的对应关系 存放在fsimage中,在运行的时候加载到内存中的. 操作日志写到edits中   二.Da ...

  5. [Effective JavaScript 笔记]第19条：熟练掌握高阶函数

    高阶函数介绍 高阶函数曾经是函数式编程的一个概念,感觉是很高深的术语.但开发简洁优雅的函数可以使代码更加简单明了.过去几年中脚本语言采用了这些个技术,揭开了函数式编程的最佳惯用法的神秘面纱.高阶函数就 ...

  6. Linux下更好用的帮助命令—cheat

    导读 Linux系统中,我们经常会用man命令来帮助查看这个命令的具体用法,man是很强大的,但是英语不好的同学用man用起来可能不那么顺手,自然而然的就出现了cheat命令,cheat命令就是通过简 ...

  7. Procrustes Analysis普氏分析法

    选取N幅同类目标物体的二维图像,并用上一篇博文的方法标注轮廓点,这样就得到训练样本集: 由于图像中目标物体的形状和位置存在较大偏差,因此所得到的数据并不具有仿射不变性,需要对其进行归一化处理.这里采用 ...

  8. Insertion Sort List

    对链表进行插入排序,比对数组排序麻烦一点. ListNode *insertSortList(ListNode *head) { ListNode dummy(-); for (ListNode *c ...

  9. Decompiled .class file,bytecode version:51.0(Java 7) Source for 'Android API 23 Platform' not found

    今天在Android Studio中访问Java源码的时候,代码上方出现如下提示: 而且方法体中显示介样内容: throw new RuntimeException("Stub!" ...

  10. CSS 确定选中变红色

    textarea:focus { border: 1px solid #f4645f; outline: none; } blockquote { border-left: 4px solid #f4 ...