web workers工作线程
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工作线程的更多相关文章
- 通信API、使用Web Workers处理线程
1.跨文档消息传输 要想接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监视. w ...
- (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event
浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核 Trident内核,也是俗称的IE内核Chrome 浏览器内核 统称为 Chromium 内核或 ...
- 使用Web Workers处理线程
使用HTML 4和JavaScript创建出来的Web程序中,因为所有的处理都是在单线程中 HTML 5的Web Workers API,HTML 5中,一个Worker实际上为一个后台运行的线程.
- Webpack 下使用 web workers 及 基本原理 和 应用场景
_ 阅读目录 一:web workers的基本原理 二:web Workers 的基本用法 三:在webpack中配置 Web Workers 四:Web Worker的应用场景 回到顶部 一:web ...
- 003-Web Worker工作线程
一.关于Web Worker工作线程 HTML5几个优势特性里,就包括了Web Worker,这货可以了解为多线程,正常形况下,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML ...
- 通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。
Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...
- JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景
摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...
- JavaScript 工作原理之七-Web Workers 分类及 5 个使用场景
Web Workers 分类及 5 个使用场景 原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 这是 JavaScript 工作原理的第七章. 本系列 ...
- HTML5 Web Workers来加速您的移动Web应用
一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...
随机推荐
- IE过滤器
1. _ 下划线属性过滤器 语法:_选择符{属性:属性值} 2. *通配符属性过滤器 语法:*选择符{属性:属性值} 3. \9: IE版本识别:其他浏览器都不识别 语法:选择符{属性: ...
- AugularJS从入门到实践(一)
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...
- 基于Http协议订阅发布系统设计
基于Http协议订阅发布系统设计 --物联网系统架构设计 1,订阅发布(subscriber-publisher) 订阅发布模式最典型的应用场景就是消息系统的设计.在消息系统的架构中 ...
- Centos7架设NMP服务器笔记
安装centos7.3 1.从mirrors.163.com下载7.3 2.准备虚拟机vitualbox,网络我使用的桥接到无线网卡,直接连我到路由器,IP自动分配(本来想搞静态IP的,搞了好久没成功 ...
- Azure PaaS服务密钥的安全性
Azure PaaS服务,比如存储,Redis缓存,服务总线,IoT中心等等,一般通过密钥来认证客户端,也就是说只有提供正确密钥的客户端才能访问和使用对应的Azure PaaS服务,所以这个密钥是很重 ...
- 面向对象JavaScript的基本概念
一.类和对象 1, JavaScript对象分为三类:本地对象,内置对象,宿主对象. 本地对象有15种:Object Function Array String Number Boolean Date ...
- USB的四种传输类型与端点
1.事务 在介绍USB传输类型之前,请允许我先简答介绍一下USB事务. 事务一般由令牌包.数据包(可选).握手包组成. 令牌包:用来启动一个事务,总是由主机发送. 数据包:可以从主机到设备,也可以由设 ...
- 51nod_1240:莫比乌斯函数
题目链接 面向题意编程.. #include<bits/stdc++.h> using namespace std; typedef long long LL; int cal(int n ...
- (转)Linux(Centos)之安装Java JDK及注意事项
场景:天下事有难易乎?为之,则难者亦易矣:不为,则易者亦难矣.人之为学有难易乎?学之,则难者亦易矣:不学,则易者亦难矣. 1 准备工作 下面配置jdk的方式在具有root权限时候能够执行.如果没有ro ...
- Cocoapods最新安装教程
一.CocoaPods简介 每种语言发展到一个阶段,就会出现相应的依赖管理工具,例如 Java 语言的 Maven,nodejs 的 npm.随着 iOS 开发者的增多,业界也出现了为 iOS 程序提 ...