Web Worker浅学
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。它独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
1、Web Worker的创建是在主线程当中通过传入文件的url来实现的。如下所示:
var webworker=new Worker('my_task.js');
创建webworker对象的时候需要判断浏览器是否支持 if(typeof Worker == 'undefind')则提示错误;
返回的webworker对象,该对象可以完成与worker线程的通信,主要通过webworker.postMessage(data)向线程发送消息,通过webworker.onmessage=function(evt){}来监听worker线程发送到主线程的消息,通过webworker.onerror=function(evt){}来监听线程中的错误消息,通过webworker.terminate()来告诉worker线程立即终止执行。
2、web worker线程是无法操作Dom对象的,所以像prompt、alert、console等都是无法在web worker线程中使用的,所以调试不太处理。但是可以将调试发送给主线程,主线程通过web worker线程发出的请求作出处理。
3、用于创建webworker线程的js文件必须和当前页面遵循同源策略,也就是说不能跨域请求js文件;另外,线程之间的消息传递是不能有Function对象的,就是说不能够传递函数,在safari浏览器中只能传递数字/字符串等基本值(连Object都不行)。并且所有线程之间的数据并不是常规的引用方式,都是一份独立的拷贝。因此一般情况下,我们会将传递的参数转化为字符串进行传递,可以通过JSON.stringify()和JSON.parse()来处理。
****一个发送消息的小例子****
woker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Worker模拟聊天</title>
<style>
.apply{width:500px;height:300px;overflow:auto;border: 1px solid #000;margin:20px;padding:20px;font-size:14px;line-height:24px;}
.apply .time{color:#ccc;font-size:12px;}
</style>
</head>
<body>
<div class="apply" id="res2"></div>
<div style="padding:20px;">
<textarea style="width:400px;height:100px;" id="res"></textarea>
<button onclick="startWorker()">发送</button>
<button onclick="stopWorker()">stop</button>
</div>
<script>
var w;
w = new Worker('worker.js');
var res = document.getElementById('res'),
res2 = document.getElementById('res2');
if(typeof Worker !== 'undefined'){
function startWorker(){
w.postMessage(res.value);
res.innerHTML = '';
w.onmessage = function(e){
var oTxt = document.createTextNode(e.data);
var oTime = document.createElement('div'),
oTimeTxt = document.createTextNode(new Date());
oTime.setAttribute('class','time')
oTime.appendChild(oTimeTxt);
res2.appendChild(oTime);
res2.appendChild(oTxt);
res2.appendChild(document.createElement('br'))
res2.appendChild(document.createElement('br'))
}
}
function stopWorker(){
w.terminate();
}
} </script>
</body>
</html>
worker.js
onmessage = function(e){
postMessage("收到:"+e.data);
}
效果:
有借鉴:https://blog.csdn.net/web_doris/article/details/38440401
最新文章
- Pycharm注册码
- WaterfallTree(瀑布树) 详细技术分析系列
- 深入学习JavaScript(一)
- SUSE Linux Enterprise Server 设置防火墙开启ssh远程端口
- lightoj1074 最短路
- msp430的两本书 电子版【worldsing笔记】
- BZOJ 3969 low power
- c语言局部变量 静态局部变量 全局变量与静态全局变量
- MVC中AuthorizeAttribute用法并实现权限控制
- Jetty:配置安全
- 经历:asp.net oracle 部署问题以及解决方法
- Java基本语法-----java常量
- (一)V4L2学习流程
- golang slice 使用及源码分析
- js通过formData上传文件,Spring后台处理
- Java的static类
- jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第三话):创建一个自由风格的项目(非maven),实现自动打war包
- mac 上面安装 tree 命令
- spring---aop(5)---Spring AOP的配置的背后的配置
- 封装自己的getClass