web worker工作线程是Html5里面提出来的一个新api,对于JavaScript我们的印象是单线程执行,如果运行复杂运算的时候,页面可能就会失去响应,
是运行在后台的javascript,独立于其他脚本 ,创建后,会在后台执行,并不会影响浏览器对于页面的响应 方法:postMessage()用于向html页面传回一段消息,
terminate()——终止web worker并释放浏览器/计算机资源 事件:onmessage</p> 使用:直接new一个出来,接收一个指向执行的javascript代码的地址。通过worker实例的onmessage方法可以接受工作线程发送过来的响应信息
工作线程通过postMessage可以向主线程发送消息,但是注意,这里的postMessage只接受一个参数
最后工作线程创建出来,如果不用了记得把他干掉work.terminate() 示例html代码如下:
    <div id="numDiv">0</div>
<button id="start">start</button>
<button id="stop">stop</button>

js代码如下:

/**
* Created by wwtliu on 14/8/16.
*/
var numDiv;
var work = null; window.onload = function(){
numDiv = document.getElementById("numDiv"); document.getElementById("start").onclick = startWorker;
document.getElementById("stop").onclick = function(){
if(work){
// Terminate()在以下多种情况下可以被调用:
// 1. 当发送一个异常,并且构造函数产生异常。
// 2. 当产生一个异常,或者析构函数发送一个异常。
// 3. 一个静态对象的析构或构造函数发送一个异常。
// 4. 以atexit注册的函数发生异常的时候。
// 5. 当你自行编写一个异常,但实际上没有异常产生的时候。
// 6. 当调用缺省的unexpected()函数时。
work.terminate();
work = null;
}
}
} function startWorker(){
if(work){
return;
}
work = new Worker("count.js");
work.onmessage = function(e){
numDiv.innerHTML = e.data;
}
}

工作线程代码如下:

 /**
* Created by wwtliu on 14/8/16.
*/ var countNum = 0;
function count(){
postMessage(countNum);
countNum++;
setTimeout(count,1000);
} count();

web workers工作线程的更多相关文章

  1. 通信API、使用Web Workers处理线程

    1.跨文档消息传输                                               要想接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监视. w ...

  2. (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event

    浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核            Trident内核,也是俗称的IE内核Chrome 浏览器内核            统称为 Chromium 内核或 ...

  3. 使用Web Workers处理线程

    使用HTML 4和JavaScript创建出来的Web程序中,因为所有的处理都是在单线程中 HTML 5的Web Workers API,HTML 5中,一个Worker实际上为一个后台运行的线程.

  4. Webpack 下使用 web workers 及 基本原理 和 应用场景

    _ 阅读目录 一:web workers的基本原理 二:web Workers 的基本用法 三:在webpack中配置 Web Workers 四:Web Worker的应用场景 回到顶部 一:web ...

  5. 003-Web Worker工作线程

    一.关于Web Worker工作线程 HTML5几个优势特性里,就包括了Web Worker,这货可以了解为多线程,正常形况下,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML ...

  6. 通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。

    Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...

  7. JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景

    摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

  8. JavaScript 工作原理之七-Web Workers 分类及 5 个使用场景

    Web Workers 分类及 5 个使用场景 原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 这是 JavaScript 工作原理的第七章. 本系列 ...

  9. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

随机推荐

  1. js验证表单密码、用户名是否输入--JS的简单应用

    在登录.注册时,我们经常会遇到下面这种情况,如果我们没有输入用户名.密码时,系统会弹出提示框.提示框信息提示内容是我们密码没有输入密码或者用户名等.那么这样的弹出框效果是如何实现的呢?文章标题既然与j ...

  2. [BZOJ2783/JLOI2012]树 树上倍增

    Problem 树 题目大意 给出一棵树,求这个树上的路径的数量,要求路径上的点权和等于s且路径的上每个点深度不同. Solution 这个题目可以用不少方法做. 首先,路径上每个节点的深度不同决定了 ...

  3. 【PHP】PHP面向对象编程--phpOOP入门

     PHP从入门到精通 之PHP的面相对象编程 面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机编程架构,OOP的一条基本原则是计算机程序 ...

  4. 常用http响应报文分析

    这是我在使用Asp.Net的时候,整理的的一些关于Http响应报文的分析笔记,零零散散的记录, 现在贴出来,抛砖引玉,如果有什么不对或者不严谨的地方,请各位大神不吝赐教. 一.HTTP响应码响应码由三 ...

  5. Python面向对象编程(一)

    1.什么是面向对象 面向对象(oop)是一种抽象的方法来理解这个世界,世间万物都可以抽象成一个对象,一切事物都是由对象构成的.应用在编程中,是一种开发程序的方法,它将对象作为程序的基本单元. 2.面向 ...

  6. [luogu P3797] 妖梦斩木棒 [线段树]

    题目背景 妖梦是住在白玉楼的半人半灵,拥有使用剑术程度的能力. 题目描述 有一天,妖梦正在练习剑术.地面上摆放了一支非常长的木棒,妖梦把它们切成了等长的n段.现在这个木棒可以看做由三种小段构成,中间的 ...

  7. React-native初体验(安卓篇)

    本篇文章主要包括两方面,如何从0开始把RN(react-native)项目整合进入现有Android项目,以及我们做的第一个RN的上线项目遇到的一些坑. 初次做RN项目,我们选择做了一个逻辑相对简单的 ...

  8. TensorFlow conv2d原理及实践

    tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, data_format=None, name=None) 官方 ...

  9. (转)mq经验总结-转

    场景:学习mq相关的知识,发现这是一篇总结性很强的文章,转过来学习学习! 1 mq经验总结 首先了解什么是mq?mq的作用是什么? mq是通讯中间件.他的作用是省去开发人员开发通讯工具的时间,节省开发 ...

  10. POI读取excel工具类 返回实体bean集合(xls,xlsx通用)

    本文举个简单的实例 读取上图的 excel文件到 List<User>集合 首先 导入POi 相关 jar包 在pom.xml 加入 <!-- poi --> <depe ...