看了一大顿web worker 唯一的意识可能就是当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时web worker 在后台运行。
所以在前台为了实时刷新执行次数,就用webwork写了个代码,刷新的是bootstrap table中的数据
1、js代码
window.onload =setInterval(function(){
var allTableData = $("#table").bootstrapTable('getData');//获取表格的所有内容行
//向后台线程提交随机数组
worker.postMessage(JSON.stringify(allTableData));
//从线程中取得计算结果
worker.onmessage=function(event){
if(event.data!=null){
var jsonObj = JSON.parse(event.data);
for(var k in jsonObj){
//此处为解析后台传过来的对象,放到row对象中
var row = {
index:**,
field:**,
value:**,
};//可以查看一下datatable的updateCell需要的参数
};
//更新表格数据
$('#table').bootstrapTable("updateCell",rows);
}
}
};
},3000);
2、webworker.js代码
onmessage=function(event){
var data=event.data;
if(data!=null){
var jsonObj = eval(data);
var resStr ;
var request = new XMLHttpRequest();//weworker只能用XMLHttpRequest,不能用$ajax,因为webworker不会识别全局变量,具体的可以看看解释
//GET的参数要写在URL中,不在send中写
request.open("POST", "../user/updataUser?jsonObj ="+jsonObj );
request.send(null);
request.onreadystatechange = function() {
if(request.readyState === 4) { //readyState为4表明服务器请求已结束
if(request.status === 200) { //判断请求是否成功
resStr = request.responseText;
postMessage(resStr);
}
}
}
}
};
3、webwork的一些解释
Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。
Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭。
Web Worker 有以下几个使用注意点。
(1)同源限制
分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。
(2)DOM 限制
Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。
(3)通信联系
Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。
(4)脚本限制
Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
(5)文件限制
Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。
更多解释以及方法可以查看http://www.ruanyifeng.com/blog/2018/07/web-worker.html