前端如何處理十萬級別的大量數據

前言

寫博客主要是用來總結、鞏固知識點，加深本身對這個知識點的理解。同時但願幫助到有須要的人。若有不正確的地方。能夠在評論區指出。大家的支持。是我不斷進步的源泉。

簡單說明下

這是一道面試題，剛開始面試官爲我前端如何處理大量數據。我第一時間就脫口而出用分頁呀！面試官說那是從後臺的角度來考慮的。從前端的角度呢？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').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的做用了。

我這裏記錄的可能有點粗糙，更詳細的能夠看下面這幾篇文章（固然，我是參考這幾篇文章的了）

MDN

Web Worker 是什麼鬼？

Web Worker 使用教程

寫的很差的地方，還請小夥伴們再評論區提出哦！