JS利用HTML5的Web Worker实现多线程
需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面
var number = 55;//传入分线程的参数
var worker = new Worker('worker.js');//利用一个js文件创建一个分线程
worker.postMessage(number);//向分线程传入数据
woker.onmessage=function(event){//设置分线程的回调函数,并接收返回的结果
console.log('接收到分线线程返回的数据:'+event.data);
}
下面是worker.js文件中的代码:
var onmessage = function(event){//接收主线程传入的数据并进行计算
var number = event.data;
var result = fibonacci(number);
postMessage(result );//返回主线程并传入返回结果
}
function fibonacci(n){//斐波拉契计算函数
return n<=2?1:fibonacci(n-1)+fibonacci(n-2);
}
注:当worker.js文件作为分线程调用的时候,worker.js文件中的this就不是指向window了,所有再分线程上面是不能使用window自带的很多函数的(比如alert),并且再分线程里面也就访问不到页面的任何元素。所以分线程的定位是只进行计算的,不做任何页面相关的操作。
JS利用HTML5的Web Worker实现多线程的更多相关文章
- Web Worker javascript多线程编程(二)
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- Web Worker javascript多线程编程(一)
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- 【转】Web Worker javascript多线程编程(一)
原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...
- 通过一次实验来了解HTML5的 Web Worker
web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 Ja ...
- 深入理解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 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...
- JS多线程之Web Worker
什么是Web Worker web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web wor ...
- 深入HTML5 Web Worker应用实践:多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- 深入 HTML5 Web Worker 应用实践:多线程编程
深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...
随机推荐
- group by分组后对组内数据进行排序
查询 每个班级英语成绩最高的前两名的记录 原文:https://www.cnblogs.com/hxfcodelife/p/10226934.html select a.Classid,a.Engli ...
- Android 使用 MPAndroidChart 实现折线图
Android 使用 MPAndroidChart 实现折线图 做Android项目的时候用到了折线图,不光折线图,还可能遇到很多的图表需要展示渲染,自己手画的话那好玩了,今天使用MPAndroidC ...
- STL之pair类型
C++ pair 类型 ---心怀虔诚,细细欣赏! 编程实践: Practice:编写程序读入一系列string和int型数据,将每一组存储在一个pair对象中,然后将这些pair对象存储在vecto ...
- JavaWeb项目忘记添加依赖
有的时候我们建项目的时候忘记添加项目的依赖了,这里示范一个提示错误,就是 The superclass "javax.servlet.http.HttpServlet" was n ...
- linux 下查看Tomcat的状态,以及开启停止服务命令
1.首先进入你的tomcat 的bin目录下 cd /你的安装目录/tomcat/bin 查看服务启动情况 ps -ef|grep java 此条命令具体含义 ps:将某个进程显示出来 -A 显示所有 ...
- Tinyhttp源码分析
简介 Tinyhttp是一个轻量型Http Server,使用C语言开发,全部代码只500多行,还包括一个简单Client. Tinyhttp程序的逻辑为:一个无线循环,一个请求,创建一个线程,之后线 ...
- java学生成绩管理系统
信1805-1 20183590 田庆辉 石家庄铁道大学 2019 年秋季 ...
- 在mac上进行JAVA开发
一. JDK 的下载与安装 终端输入java看看有没有安装java: 见到此弹窗,说明没有安装呀! 点击oracle官网链接: http://www.oracle.com/technetwork/j ...
- Angular 2.0 文本拖拽
基于Angular7.1和TypeScript实现 Html代码 <div style="padding-left: 0px;"> <div id='conten ...
- 题解【洛谷P5019】[NOIP2018]铺设道路
题目描述 春春是一名道路工程师,负责铺设一条长度为 \(n\) 的道路. 铺设道路的主要工作是填平下陷的地表.整段道路可以看作是 \(n\) 块首尾相连的区域,一开始,第 \(i\) 块区域下陷的深度 ...