web worker实时刷新界面执行次数

本文介绍了如何利用Web Worker技术在前端实现界面实时刷新执行次数,特别是在更新Bootstrap Table数据时。Web Worker允许在后台运行JavaScript,避免阻塞主线程,提高UI交互性能。文章还提及了Worker线程的创建、运行特点以及同源限制、DOM隔离、通信方式等关键点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

看了一大顿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

在处理消息时,定时刷新对话框画页信息 处理这个操作时有可能出现以下错误 1. 在DLG中点击开始,在线程中进行处理,并通过发送消息来更新DLG界面内容,如在线程中发送PostMessage,消息会排入消息队列等待所有线程处理循环后,即系统不忙了,才会去处理Post的消息刷新界面 所以要处理线程同时即时刷新界面要用SendMessage,它是一同步发送消息,会等处理完成才返回,即一SendMessage就会进入Refresh函数 2.而多线程函数的使用中可能出现以下问题,如果用 CWinThread * pthread=AfxBeginThread(……………); 并设一个全局变量flag=0; 在点击开始对应的START函数里开始线程后,用等待 While(flag!=1);//flag为当线程结束时设为1 来等待线程结束后,去处理 Delete pthread;//因为怕内在泄漏要手动delete 但此时会出现死锁现象,在DoMadal时,mainwnd会把消息处理队列处理转让给DLG来进行处理,当进入线程时,SendMessage,转到DLG窗口线程要进行处理,而此时窗口线程正一直在while(1)中,无法去处理SendMessage的消息,而UI线程又在等待着WORK线程的结束,但WORK线程此时正停滞等待SendMessage的回复,如此便造成了死锁现象 3.解决方法 而其实不用CWinthread去接收AfxBeginThread的返回值,并delete,此函数在线程结束时,会自动撤消线程的相关资源,所以不用用while(1)来等待线程的结束(见具体程序代码)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值