什么是 Web Worker？

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

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

计数器：

  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. //下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
  18.   if(typeof(w)=="undefined")
  19.   {
  20.   w=new Worker("/example/html5/demo_workers.js");
  21.   }
  22. //向 web worker 添加一个 "onmessage" 事件监听器：
  23.   w.onmessage = function (event) {
  24.     document.getElementById("result").innerHTML=event.data;
  25.     };
  26.   }
  27. else
  28.   {
  29.   document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  30.   }
  31. }
  32.  
  33. function stopWorker()
  34. {
  35. //如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
  36. w.terminate();
  37. }
  38. </script>
  39.  
  40. </body>
  41. </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. lnmp常见问题

    常见问题地址:http://lnmp.org/faq.html 如何修改安装LNMP时输入的域名? 修改方法:编辑/usr/local/nginx/conf/nginx.conf 查找安装时输入的域名 ...

  2. 最近为毛喜欢上C/C++语言了

    旁观者李四说:此人大笨也!我用鼠标随便拖几个控件, 就是一个xxx管理系统了,你用C语言怕是一年也写不出来吧! 好吧,我要承认,讲这话的都已经是mS的奴才了,别的我不了解, MFC本身就是一个封闭的架 ...

  3. convert jar to java

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 首先解压一下下载的jar文件,extract jar file , $jar -xvf file.j ...

  4. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  5. AspectJ报错：error at ::0 can't find referenced pointcut XXX

    今天在使用AspectJ进行注解切面时,遇到了一个错误. 切点表达式就是无法识别——详细报错信息如下: Exception in thread "main" org.springf ...

  6. 破解TP-Link路由－嗅探PPPoE拨号密码

    如果你平时都使用路由器直接上网,那么你还记得你的宽带(ADSL)帐户名和密码吗?忘记密码后又该如何找回呢?别急,本文带你一同找回遗忘的ADSL密码.1.安全性较差的路由器(例如腾达的某些路由器):这里 ...

  7. js中document.documentElement 和document.body 以及其属性 clientWidth等

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  8. jquery.fileupload.js 杂记

    通过$your_jq_dom.fileupload({},donf:function...,fail:function..., ...) 得到的只是一个支持上传的控件,当然绑定了各种事件. 传参给ur ...

  9. 《ASP.NET1200例》ListView 控件与DataPager控件的结合<一>

    分页     在前一部分开始时介绍的原 HTML 设计中内含分页和排序,所以根据规范完整实现该网格的任务尚未完成.我们先分页,然后再排序. ListView 控件中的分页通过引入另一个新控件 Data ...

  10. Shortest Word Distance

    Given a list of words and two words word1 and word2, return the shortest distance between these two ...