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

什么是 Web Worker？

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

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

浏览器支持

所有主流浏览器均支持 web worker，除了 Internet Explorer。

使用前先检测是否支持web worker

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

  {

  // Yes! Web worker support!

  // Some code.....

  }

else

  {

  // Sorry! No Web Worker support..

  }

先创建一个js文件，命名为‘demo_workers.js’ ，代码如下。其实本质上是一个延迟的递归函数。每隔1s调用自己，i+1.

var i=0;

function timedCount(){

　　　　 i=i+1;

	console.log(i)

	postMessage(i);//向其他窗口或者页面发送消息

	setTimeout("timedCount()",1000);

}

timedCount();

然后在同级下，新建个html文件

<!DOCTYPE html>

	<meta charset="utf-8">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<html>

<body>

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

	<button onclick="startWorker()">Start Worker</button>

	<button onclick="stopWorker()">Stop Worker</button>

<br /><br />

<script>

	var w;

	function startWorker(){

	　　if(typeof(Worker)!=="undefined"){//判断Worker api 支持否

  	　　　　if(typeof(w)=="undefined"){//w变量必须是未定义过的，重复点击对消息的接收并不会产生影响，即使你手速再快。

    	　　　　　　w=new Worker("demo_workers.js"); //创建worker对象 括号内填url
               //注意文件引入路径，如果是在同级文件js文件夹里，则 w=new Worker("./js/demo_workers.js");

    	　　　　}

　　　　　　　　　w.onmessage = function (event){//html5提供的postMessage和onMessage这一对方法来在不同的文档页或者不同的工作线程之间进行通信。onmessage作用是接收消息

	　　　　　　document.getElementById("result").innerHTML=event.data;//event为对应的事件，postMessage发送出来的i值在该对象的data属性中。
　　　　　　　　　　　console.log('触发w')

	　　　　};

　　　　　　 }else{

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

	　　}

	}

	function stopWorker(){

	　　w.terminate();//终止接收，此时js文件中的i值就卡在了如下图的13，断开接收它就自动暂停执行timeCount，停止该JS文件内的线程。然后下次再重新计数时，引入文件i又重置为0.

	}

</script>

</body>

</html>

上右侧图，可以看出，每次postMessage发送消息过来，w都会去时时监听该消息。

执行效果如下：从右边可以看出，当点击停止计数时，js文件内部的timeCount函数也会停止计数的。即停止了消息接受后，消息源也会停止执行。

　　

H5中的web worker示例demo分析的更多相关文章

  1. HTML5中的Web Worker技术

    为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...

  2. HTML5中的Web Worker

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

  3. Dynamics 365 CE的插件/自定义工作流活动中调用Web API示例代码

    微软动态CRM专家罗勇 ,回复325或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 现在Web API越来越流行,有时候为了程序更加健壮,需要在插件 ...

  4. vue中使用web worker

    众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验.web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开 ...

  5. H5中使用Web Storage来存储结构化数据

    在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...

  6. 进程，线程，Event Loop(事件循环)，Web Worker

    线程,是程序执行流的最小单位.线程可与同属一个进程的其他线程共享所拥有的全部资源,同一进程中的多个线程之间可以并发执行.线程有就绪,阻塞,运行三种基本状态. 阮一峰大神针对进程和线程的类比,很是形象: ...

  7. 【转向Javascript系列】深入理解Web Worker

    本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/11/deep-in-web-worker/ 上一篇文章<从setTimeout说事件循 ...

  8. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  9. html5之web worker

    Web Worker   在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...

随机推荐

  1. 工作随笔——jasypt-spring-boot使用

    最近有一个项目,要求对各种配置文件中的数据进行加密.so,let`s do it. Maven依赖 <dependency> <groupId>com.github.ulise ...

  2. iOS 计时器三种定时器的用法NSTimer、CADisplayLink、GCD

    原文:http://www.cocoachina.com/ios/20160919/17595.html DEMO链接

  3. iOS APP之间到跳转，以及热门应用，手机自带到应用跳转

    应用之间的跳转 在第一个APP中,做如下操作:1.在info.plist文件中的"信息属性列表"下添加一项:"URL类型"; 2.点开"URL类型&q ...

  4. Xamarin Android 中Acitvity如何传递数据

    在xamarin android的开发中,activity传递数据非常常见,下面我也来记一下在android中activity之间传递数据的几种方式, Xamarin Android中Activity ...

  5. JS如何实现导航栏的智能浮动

    <script language="javascript">     function smartFloat(obj) {         var obj = docu ...

  6. bzoj 3143: [Hnoi2013]游走

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  7. 文件上传之伪Ajax方式上传

    From: <由 Windows Internet Explorer 8 保存> Subject: =?gb2312?B?zsS8/snPtKvWrs6xQWpheLe9yr3Jz7SrI ...

  8. Oracle添加记录的时候报错：违反完整性约束,未找到父项关键字

    今天需要向一个没有接触过的一个Oracle数据库中添加一条记录,执行报错: 分析: 报错的根本原因:未找到父项关键字的原因是因为你在保存对象的时候缺失关联对象. 问题的解决思路:先保存关联对象后再保存 ...

  9. centos7 编译ntopng源码

    先安装编译所需的开发工具 yum groupinstall 'Development Tools' yum install tcl yum install libpcap libpcap-devel ...

  10. ES6(三）数组的扩展

    1.Array.form ES6中,Array.from = function(items,mapfn,thisArg) {  }   Array.from 用于将 类数组 和 可遍历对象(实现了It ...