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 承载了越来越 ...
随机推荐
- Django_模型字段属性
""" 定义属性 概述 ·django根据属性的类型确定以下信息 ·当前选择的数据库支持字段的类型 ·渲染管理表单时使用的默认html控件 ·在管理站点最低限度的验证 · ...
- windows 安装 cordova
windows 安装 cordova 参考资料:https://www.cnblogs.com/bpdxqx/p/6061719.html 1.安装nodejs(自动包含npm) 2.在命令行中通过n ...
- HTML5学习(5)实体字符
HTML Entity 实体字符通常用于在页面中显示一些特殊符号. 书写方式: 1. &单词; 2. &#数字; 常用实体字符: < < litter than &g ...
- JavaWeb01-动态网页
01.动态网页的优势 动态网页是在服务器端运行的程序!随不同用户,不同条件 返回不同的结果! 001.交互性:网页会根据用户的要求和选择而动态的改变和现实网页内容! 002.自动更新:无需改变页面的代 ...
- 【visio】跨职能流程图
归属于 流程图类别 相比于普通流程图,突出了参与流程的组织.部门之间的联系,形式化地说,它突出的是参与流程的对象之间的联系. 它除了表达基本流程,同时也能展示每个每个流程的归属方,让每个对象明确知道自 ...
- DVWA全级别之SQL Injection(SQL注入)
DVWA全级别之SQL Injection(注入) DVWA简介 DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web ...
- python的MySQLdb库基本使用介绍
MySQLdb库 import MySQLdb 简介 提供mysql的基本操作(包括建表,读取表数据,插入数据到表) 数据库操作基本步骤 #!/usr/bin/python # -*- coding: ...
- 三大查找算法(Java实现)
三大查找算法 1.二分查找(Binary Search) public class BinarySearch { public static void main(String[] args) { in ...
- 使用Python处理非对称加密-测试大佬常用的处理方式
一.思考❓❔ 1.什么是非对称加密? 公钥加密系统,广泛用于数据加密传输 更详细的解释可参考维基百科( https://en.wikipedia.org/wiki/RSA_(cryptosystem) ...
- 6_12 油田(UVa572)<图的连通块DFS>
有一家石油公司负责探勘某块地底下的石油含量,这块地是矩行的,并且为了探勘的方便被切割为许多小块.然后使用仪器对每个小块去探勘.含有石油的小块称为一个pocket.假如两个pocket相连,则这两个po ...