web Worker使js实现‘多线程’?
大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党?
姑且抛开标题不说,先说我们经常会遇到的一个问题,假如我们页面中有很多js要执行,比如页面加载或点击某个按钮就会触发js,最坏的结果就是在很长的一段时间内用户都不能进行任何操作,所以,退出,关闭。。
当然上面说的有一些夸张,但是比如在移动端,我们都会想办法不停的提高页面性能,在某些情况下如果能有类似多线程的解决办法就更好了~
html5 提出了一个名词:web Worker,按照官方的解释:web worker 是运行在后台的 JavaScript,不会影响页面的性能。也就可以理解为两段js同时执行,是不是也可以称呼为‘多线程’了呢,所以看标题……
今天主要来看一下基本用法:
首先是我们的前台页面,假设我们有一段计算的代码比较耗时,这时候我们需要后台的一个cal.js来计算。
在我们的前台页面,我们这样写:
var worker=new Worker(cal.js'),
i=100000000,
ele=document.getElementById(‘btn’);
//当点击某个按钮时,执行某个计算
ele.addEventListener(‘click’,function(){
worker.postMessage(i);
worker.onmessage=function(e){
alert(e.data)
}
},false)
在cal.js中我们就进行计算
onmessage=function(e){
var data=e.data;
for(i=0;i<data;i++){
//计算的代码
}
postMessage(data)
}
这样一个简单的worker就实现了,通过点击按钮,后台的cal.js执行计算,而不会影响前台的操作;
简单总结一下,worker方法主要包括:
前台页面:
- 通过 new Worker( js) 加载一个JS文件来创建一个worker并返回一个worker实例。
- 通过worker.postMessage( data ) 方法来向worker发送数据。
- 通过worker.onmessage方法来接收worker发送过来的数据。
- worker.terminate() 可以终止worker
后台js:
- 通过postMessage( data ) 方法来向主线程发送数据。
- 绑定onmessage方法来接收主线程发送过来的数据。
web Worker使js实现‘多线程’?的更多相关文章
- Web worker 与JS中异步编程的对比
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...
- 深入 HTML5 Web Worker 应用实践:多线程编程
深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...
- 深入HTML5 Web Worker应用实践:多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
- 深入理解javascript异步编程障眼法&&h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
- 一个简单的HTML5 Web Worker 多线程与线程池应用
笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...
- 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)
一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...
- web worker 扫盲篇
什么是woker 官方的解释是这样的: worker是一个对象,通过构造函数Worker创建,参数就是一个js文件的路径:文件中的js代码将运行在主线程之外的worker线程: var jsFileU ...
- HTML5新增的一些属性和功能之八——web Worker
Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...
随机推荐
- MyBatis源码分析(2)—— Plugin原理
@(MyBatis)[Plugin] MyBatis源码分析--Plugin原理 Plugin原理 Plugin的实现采用了Java的动态代理,应用了责任链设计模式 InterceptorChain ...
- FineUI常见问题
常见问题解答(必读) http://fineui.com/bbs/forum.php?mod=viewthread&tid=655
- sicp-py
第一章 在第一章中,我们专注于计算过程,以及程序设计中函数的作用.我们看到了如何使用原始数据(数值)和原始操作(算术运算),如何通过组合和控制来形成复合函数,以及如何通过给予过程名称来创建函数抽象.我 ...
- 关于application/x-www-form-urlencoded等字符编码的解释说明
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...
- Linux设置Memcached开机启动
Memcached开机启动方式 方法一: 在 /etc/rc.d/rc.local 文件中追加启动命令 /usr/local/memcached/bin/memcached -u root -d - ...
- LINQ for XML简单示例
LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言的扩展.它允许开发人员以与查询数据库相同的方式操作内存数据.从技术角度而言,LI ...
- poj 1695
用动态规划,dp[a][b][c]表示从位置最大的车在a(注意不是第一辆车),第二的车在b,第三的车在c开始最少需要的时间. 方程:dp[a][b][c]=max{dp[a+1][b][c], ...
- html用户注册界面
html用户注册界面 先上一张简约的界面的效果图 这里是style里面的内容 <style> input[type]{ border: 1px solid darkorange; ba ...
- js跨域问题
跨域概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域的主要原因是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容). 常用的跨域解决方案: 1.J ...
- python用二进制读取文件
python二进制读取文件 很多时候,都需要用到二进制读取文件.毕竟很多信息不是以文本的形式存储.例如:图片,音乐等等.这些东西都是有规则的二进制文件. 在python中,二进制读取采用rb的方式. ...