大家都知道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实现‘多线程’?的更多相关文章

  1. Web worker 与JS中异步编程的对比

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...

  2. 深入 HTML5 Web Worker 应用实践:多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

  3. 深入HTML5 Web Worker应用实践:多线程编程

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

  4. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

  5. 深入理解javascript异步编程障眼法&amp;&amp;h5 web worker实现多线程

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...

  6. 一个简单的HTML5 Web Worker 多线程与线程池应用

    笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...

  7. 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)

    一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...

  8. web worker 扫盲篇

    什么是woker 官方的解释是这样的: worker是一个对象,通过构造函数Worker创建,参数就是一个js文件的路径:文件中的js代码将运行在主线程之外的worker线程: var jsFileU ...

  9. HTML5新增的一些属性和功能之八——web Worker

    Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...

随机推荐

  1. visual studio code 里调试运行 Python代码

    最近对微软的visual studio code 挺感兴趣的,微软的跨平台开发工具.轻量简洁. 版本迭代的也挺快的,截止16年8月2日已经1.3.1版本了,功能也愈加完善.(16年12月18日 已经, ...

  2. 移动端中pagehide、pageshow的应用

    闲话少叙,来进入场景:订单提交页面,各种积分礼品卡规则都算好了,用户提交表单开始支付,支付完成进入成功提示页面,这是绝大部分网站的付款体验吧,那么问题来了,web移动端中进入成功提示页后,用户点击浏览 ...

  3. js笔记---封装自己的Ajax方法

    //地址 成功方法 失败方法function Ajax(url, funsucc, funfial) { var oAjax = null; if (window.XMLHttpRequest) { ...

  4. (转载)为啥我们要学习Linux

    学习Linux也有一阵子了,这过程中磕磕撞撞的,遇到了问题,也解决了一些问题,学习的路子是曲折的,想总结点啥的,让刚刚学习Linux的不会望而生畏. 为啥我们要学习Linux 技术的价值不在于这个技术 ...

  5. docker(4)docker的网络,自定义网桥

    Docker 的网络 运行 ifconfig 找到 docker0 : 虚拟网卡默认网卡名称为docker0 查看docker 的网桥: 我这里默认们没有进行安装 网桥管理设备:进行安装一下: yum ...

  6. css ——行级元素与块级元素解析

    一 . 先说说二者的本质区别吧:        行级元素是可以和其他元素处于一行,不用必须另起一行.块级元素是每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 二 .下面 ...

  7. (链表 双指针) leetcode 142. Linked List Cycle II

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...

  8. jQuery雷达扫描切换幻灯片代码

    基于jQuery雷达扫描切换幻灯片代码.这是一款切换效果类似雷达扫描,支持鼠标滚轮滚动切换.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  9. win7查看其它工作组 win7 所有工作组

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha win7 所有工作组 ==== win7  网络 工作组 查找 自身有问题.  多刷新几 ...

  10. Swift中"#"的用法

    配置外部参数名 在函数(或者方法)的参数名前添加"#",可以使该参数拥有相同的本地参数名和外部参数名. 注:在方法中,第二个及后续的参数,默认是具有和内部参数一致的外部参数名的,只 ...