HTML5 API详解(8):worker多线程教你如何避免页面卡死
web worker是html5 提供的一个JavaScript多线程的解决方案,worker用于处理一些大量复杂耗时的计算,免得页面冻结、挂起、卡死。
比如:我们要运算一个复杂的数学计算:递归计算。
var fibonacci =function(n) { return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);};fibonacci(40)
当参数达到40或者以上的时候,页面就会出现明显的卡死现象。这个时候用户就只能等待算计结束才可以做其他操作。这种情况下就适合使用worker开辟新线程来处理这个运算。
main.html页面为主线程
<script>
//开辟一个新线程
var worker = new Worker('worker.js');
worker.postMessage(40) ;
worker.onmessage = function(ev){
console.log(ev);
worker.terminate() //终止一个worker线程
};
</script>
worker.js 开辟的新线程
//新线程
//定义递归函数
var fibonacci =function(n) {
return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
onmessage = function(ev){
var param = parseInt(ev.data,10) ;
//把地柜函数的计算交给新线程,计算完之后用postMessage把结果传回给主线程
postMessage(fibonacci(param))
}
这样就可以实现主线程和新开辟的线程之间的信息交互。复杂的计算就交给了worker.js。页面不用卡死。新线程会在处理完计算之后把数据传回给主线程(有点异步请求的感觉)。
总结我们可以做什么:
1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性
有那些局限性:
1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性.
HTML5 API详解(8):worker多线程教你如何避免页面卡死相关推荐
- HTML5 API详解(18):IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
- HTML5 API详解(17):Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
- HTML5 API详解(16):web socket 全双工通信
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet.Comet技术可以让服务器主动以异步方式向客户端推送数据. 使用轮询时,浏览器定期发送HTTP请求 ...
- HTML5 API详解(15):History 不刷新也可以实现网页跳转
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- HTML5 API详解(14):Notification 实现桌面提醒
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框.这样的一个功能可以使用在一些消息推送的场景下.不过,虽然h ...
- HTML5 API详解(5):Page Visibility API帮您省流量,提高体验
页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
- HTML5 API详解(3):为何网页上要增加Battery电池状态API
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性.移动端的页面显然会越 ...
- HTML5 API详解(12):canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
- HTML5 API详解(11):Cache 应用程序缓存,这下离线也可以玩了
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请求来到的时候,如果是相同的URL,缓 ...
最新文章
- 被劝退的学渣,逆袭成高级语言之父,改变编程方式却说“不喜欢写代码”!...
- 十分钟轻松让你认识Entity Framework 7
- WIN7的CMD界面下输入ipconfig后提示不是内部或外外部命令,也不是可运行的程序或批处理文件...
- php7.2 开启mcy扩展,phper必知必会(二)
- 《漫画线性代数》读书笔记 用矩阵解方程组
- python 中求最大值问题_Python中用max()方法求最大值的介绍
- 在Linux里awk与sed的区别,linux awk和sed讲解
- Sql中partition by的使用
- 【转载】RPG模式研究——即时制与回合制战斗对比
- 问题五十四:怎么用ray tracing画参数方程表示的曲面(2)—— bezier surface
- 使用OBS直播软件进行直播推流
- win10下 你需要来自trustedinstaller的权限 修改权限
- easyexcel怎么设置表头宽度_EasyExcel的不确定表头(根据数据生成表头)的excel导出和二级表头以及设置表头的宽度自适应...
- java中操作docker
- Eclipse中去掉代码中的警告Warn
- 渗透之——使用Metasploit实现基于SEH的缓冲区溢出攻击
- dubbo 中文官网
- 计算机组成原理 启航教育,2021计算机考研:计算机组成原理知识点CPU的功能和基本结构...
- DownUnderCTF 2021 osint 赛后复现
- python普通年金终值_下列投资决策评价指标中,考虑资金时间价值的有(