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

简单说明下

这是一道面试题，刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀！面试官说那是从后台的角度来考虑的。从前端的角度呢？emmmmm...我思考了一下，分批加载，懒加载。监听用户的滑动分批显示数据。接着又问，如果我要对这些大量数据做计算做处理呢，同时又不能让页面崩掉、假死。该如何操作呢？顿时我就懵逼了，这。。这个要怎么操作呀。心想做计算啥的不是应该在后台做完吗！

而且怎么可能一下子给前端这么多数据吗，~~

抱怨归抱怨，吐槽归吐槽~~

后来问了下面试官，实现的大概思路。后来面试官说是通过worker来做子线程来实现的。

好，那我们就来学习一下这个worker

什么是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').οnclick=
     
     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.οnerrοr=
     
     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的作用了。

作者：寒江水
链接：https://juejin.im/post/5cb03fbee51d456e853f810b
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。