Web Worker 使用场景

10,314 阅读4分钟
       
       我们都知道js是单线程模型。也就是说一次只能处理一件事情,前面的事情没有完毕,后面的事情要等待前面的事情处理完毕后才能执行。随着多核CPU的出现,我们可以最大限度的利用cpu多核,来提高js的性能。

        Worker接口可以创建后台任务。即可以给js运行新增线程。用于处理一些耗时、耗费性能的任务(异步的除外)。

       要解决的问题是1.解决页面卡死问题。2.发挥多核CPU的优势,提高js性能。

一、Web Worker 具体用法

//main.js 主线程
//传递一个数字给worker线程。worker线程计算处理完毕后,返回一个信息给主线程。

if (window.Worker) {   //这一步比较重要,兼容性判断。
        //1.创建一个worker线程。
	const myWorker = new Worker("worker.js");
        //2.向worker线程发送数据,值可以是number,string,boolean ,file,blob 等
	  myWorker.postMessage(10000000000);
	
        //3.监听后台任务,
	myWorker.onmessage = function(e) {
	    result.textContent = e.data;
	    console.log('Message received from worker');
	}

       //4.当离开页面的时候,或者需要结束worker时(比如任务完成时),
        //可以结束Worker线程,不必占用资源       
       // myworker.terminate();


       //5.当myWorker异常时的时候,会触发onerror事件    
        myWorker.onerror = function() {
             console.log('There is an error with your worker!');
        }
} else {  //这一步非常重要。具体代码根据需要更具自己的业务写。
	console.log('Your browser doesn\'t support web workers.')
}

//worker.js  worker 线程
// 程序处理完毕后返回一个结果给主线程。//0 可以加载其他js进来,比如ajax.
//importScripts('ajax.js','b.js')  

//1.监听主线程
onmessage = function(e) {
  console.log('Worker: Message received from main script');

    接收来自主线程发送过来的数据
    let num = e.data;
//使用for循环模拟一个耗时、耗性能的任务。(如果这个for循环放在主线程,那么页面很可能会卡死,
//影响用户体验)。for(let i = 0;i<=num;i++){
    if(i==num){
       //2.向主线程发送数据
        postMessage('任务完成啦!')
    }
}
//3.worker 线程也可以调用close 方法来结束worker线程。
// close()


 //4.同样的,在worker 线程中也可以监听错误信息。
onerror = function(err){
    console.log(err)
}

二、使用场景

接下来说说哪些任务比较适合使用Worker。这个是最重要的一点。

1.如果是很消耗主线程性能的程序。可以考虑使用Web Worker。可以防止页面卡死情况。

2.弹屏,webaudio(两个群友的看法)。www.bilibili.com/  就有使用Worker。但由于代码被压缩,混淆,未能看出其详细使用情况。欢迎评论,多多指教Worker的应用场景。

三、注意事项

1.非同源限制(本地代码如果以盘符的方式打开也不行,因为没有源啦)

          主线程代码与Worker线程代码必须同源才能一起正常工作。

2.DOM、脚本限制

       “Worker 线程所在的上下文环境与主线程不一样,无法读取主线程所在网页的 DOM 元素,也无法使用documentwindow这些对象。但是,Worker 线程可以使用navigator,location,XMLHttpRequest。除此之外,Worker 线程不能执行alert()confirm()等方法.

3.任务顺序

        Worker线程任务需要等待主线程任务结束才能进行。

4.Worker结束

  可以主动关闭Worker线程。如果是多页应用的话,离开了Worker页面,Worker 也不会工作。

四、其他

1.关于Ajax轮询放在Worker线程里面的看法。

        ajax 本来是异步操作,有自己的线程,而且兼容性很好。如果使用Worker的话,需要考虑兼容性。所以ajax轮询放在Worker里面得不偿失。是不明智的。

2.关于Worker中在创建Worker的看法。

       由于Worker中在创建Worker兼容性差,不推荐使用。


        如果觉得这篇文章不错,可以支持一下(点赞+关注);如果觉得不好,可以在评论区留下您宝贵的建议!您的建议就是我们宝贵的财富!

免费领取nodejs全套视频,nodejs websocket ,MySQL基础班全套视频,phthon视频,几十本编程电子书籍,PHP入门基础视频,Java入门基础视频等!(公众号回复 '奇点的世界')



相关文章

彻底弄懂文件跟二进制数据操作

参考文章

developer.mozilla.org/en-US/docs/…