JS多线程之Web Worker
什么是Web Worker
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
怎么用
HTML页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Worker</title>
</head>
<body>
<p>计数：<output id="result"></output></p>
<button onclick="startWorker()">开始计数</button>
<button onclick="endWorker()">结束计数</button>
<script>
var w; // 此时的w是undefined function startWorker() {
// 判断当前浏览器是否支持Worker
if(window.Worker){
// 判断是否有w
if(typeof(w) == 'undefined'){
// 创建一个新的Worker对象，他会去执行demoWorkers.js这个文件下的JS代码
w = new Worker('demoWorkers.js');
}
// 给Worker添加一个事件监听器，Worker子线程返回消息时被调用，返回的数据在data里
w.onmessage = function (event) {
console.log(event);
console.log(event.data);
document.getElementById('result').innerHTML = event.data;
}
}else{
// 浏览器不支持Worker要做的事
document.getElementById('result').innerHTML = '不支持Web Worker'
}
}
function endWorker() {
// 终止 web worker，并释放浏览器/计算机资源
w.terminate();
w = undefined;
}
</script> </body>
</html>
子线程demoWorkers.js代码
var i = 0;
function timeCount() {
i = i+1;
// postMessage()方法-它用于向HTML页面传回一段消息
postMessage(i);
setTimeout('timeCount()', 500)
} timeCount();
效率对比
没有使用WebWorker：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <p>100000000以内累加总和为：<output id="result"></output></p>
<button onclick="startSum()">开始计算</button> <script>
function startSum() {
console.time('1');
var sum = 0;
for(var i = 0;i<100000000;i++){
sum += i
}
document.getElementById('result').innerHTML=sum;
console.timeEnd('1');
}
</script> </body>
</html>
然后是耗时如下：
使用Web Worker：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <p>100000000以内累加总和为：<output id="result"></output></p>
<button onclick="startSum()">开始计算</button>
<script> // Web Worker
function startSum() {
console.time('1');
var w;
if(window.Worker){
if(typeof(w) == 'undefined'){
w = new Worker('sumWorker.js')
}
w.onmessage = function (event) {
document.getElementById('result').innerHTML = event.data;
};
console.timeEnd('1');
}else{
document.getElementById('result').innerHTML = '该浏览器不支持Web Worker'
}
}
</script> </body>
</html>
sumWorker.js
var sum = 0;
for(var i = 0;i<100000000;i++){
sum += i
}
postMessage(sum);
耗时如下：
JS多线程之Web Worker的更多相关文章
- JS利用HTML5的Web Worker实现多线程
需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面 var number = 55;//传入分线程的参数 var worker = ne ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- 一个简单的HTML5 Web Worker 多线程与线程池应用
笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...
- Web Worker
写在前面 众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况 ...
- HTML5新增的一些属性和功能之八——web Worker
Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...
- Web Worker无阻塞UI的牛逼技术，html5，可惜无法敢于UI
众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况,这么糟糕 ...
- JS线程模型&Web Worker
js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...
- web Worker使js实现‘多线程’？
大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...
- javascript 多线程Web Worker不引用外部js文件的方法
最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...
随机推荐
- git的使用学习（五）git的分支管理
分支管理 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平 ...
- C罗是你人生中最好的健身教练和精神导师
C罗又进球了,两场小组赛包揽全队4粒进球,一己之力帮助葡萄牙取得1胜1平,掌握出线主动权.此前三届世界杯金靴分别只有6球.5球.5球进账,C罗如果能延续火爆状态,金靴唾手可得. 之前三届世界杯,C罗7 ...
- 使用TypeScript创建Vue项目
Vue的灵活性总是让代码看起来非常洗练,对TypeScript来说也是一种挑战, 好在Vue对TypeScript进行了一次全方位的适配. 相对于React严谨的代码,Redux啰嗦的样板代码,Vue ...
- Word 下划线无法对齐？用表格替代下划线（论文封面必备）
1. 前言 在使用Word排版制作合同或者论文封面时,我们可能会使用一些下划线,但是,你在下划线上输入内容后,发现下划线会随着内容而增长,根本无法与上下的下划线对齐.有什么好办法可以解决这一问题呢?其 ...
- 长乐培训Day7
T1 删除 题目 [题目描述] 现在,我的手上有 n 个数字,分别是 a1,a2,a3,...,an. 我现在需要删除其中的 k 个数字.当然我不希望随随便便删除,我希望删除 k 数字之后,剩下的 n ...
- redis数据库——python使用和django中使用
为什么要学redis 1.redis是内存 no-sql 数据库,相比mysql等硬盘数据库效率高 2.在内存值配置数据库使用,而不直接使用内存,redis存储的数据是可以管理的 3.memcache ...
- 在vue中使用ElementUI
完整引用ElementUI: 安装:在需要使用到的vue项目目录下,使用npm下载安装: npm/cnpm i element-ui -S/--save <!-- 引入样式 --> < ...
- JNI创建共享内存导致JVM terminated的问题解决（segfault，shared memory，内存越界，内存泄漏，共享内存）
此问题研究了将近一个月,最终发现由于JNI不支持C中创建共享内存而导致虚拟机无法识别这块共享内存,造成内存冲突,最终虚拟机崩溃. 注意:JNI的C部分所使用的内存也是由JVM创建并管理的,所以C创建了 ...
- 如何加入 Skype for Business 会议？
参加一个线上培训,收到了Skype的参会地址,是这个样子的 然后就是一脸懵逼的不知道怎么参加会议了.找了半天终于在同事的帮助下参加成功. 我的参加方法:在Window上用Skype for Busin ...
- collections.defaultdict()的使用
这里的defaultdict(function_factory)构建的是一个类似dictionary的对象,其中keys的值,自行确定赋值,但是values的类型,是function_factory的 ...