前端如何处理十万级别的大量数据

什么是worker
运行者 Worker 接口是Web Workers API的一部分,代表一个后台任务,
它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数,指定一个脚本,在工作线程中执行。(引自MDN)
 

看概念可能有点枯燥,通俗点讲就是:因为js是单线程运行的,在遇到一些需要处理大量数据的js时,可能会阻塞页面的加载,造成页面的假死。这时我们可以使用worker来开辟一个独立于主线程的子线程来进行哪些大量运算。这样就不会造成页面卡死。也说明 worker可以用来解决大量运算是造成页面卡死的问题。


worker的语法
const worker=new Worker(aURL, options)

它有两个参数:

aURL(必须)是一个DOMString 表示worker 将执行的脚本的URL。它必须遵守同源策略。

options (可选)它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程

worker的属性

Worker.onerror:指定 error 事件的监听函数

Worker.onmessage:指定 message 事件的监听函数,发送过来的数据在Event.data属性中。

Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。

worker的方法、

Worker.postMessage():向 Worker 线程发送消息。

Worker.terminate():立即终止 Worker 线程。

使用worker的注意点


1.同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

2.DOM 限制

Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。

3.通信联系

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

4.脚本限制

Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

5.文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

我们来看个实列


没有使用worker情况

求斐波纳茨数列的第38项

    <div style="width:100px;height:100px;background-color:red;"></div>     document.querySelector('div').onclick=function(){    console.log('hello world');  }  
    function fibonacci(n){    return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);   }
    console.log(fibonacci(38));
使用了woroker的情况
   <div style="width:100px;height:100px;background-color:red;"></div> 
   var worker=new Worker('worker.js');worker.postMessage(40);
   worker.onmessage=function(event){    var data=event.data;    console.log(data)};
   worker.onerror=function(event){    console.log(event.fileName,event.lineo,event.message);};
<!--worker.js-->
   self.onmessage = function (event) {    var data = event.data;    var ans = fibonacci(data);    
   this.postMessage(ans);};
   function fibonacci(n) {    return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);}

身边有电脑的小伙伴可以把上面代码复制到电脑上运行下,对比下,看下效果。就会明白这worker的作用了。
by:大雄

猜你喜欢

转载自blog.csdn.net/qq_39581763/article/details/89491682