前端如何處理十萬級別的大量資料

寒江水發表於2019-04-14

前言

寫部落格主要是用來總結、鞏固知識點,加深自己對這個知識點的理解。同時希望幫助到有需要的人。如有不正確的地方。可以在評論區指出。你們的支援。是我不斷進步的源泉。

簡單說明下

這是一道面試題,剛開始面試官為我前端如何處理大量資料。我第一時間就脫口而出用分頁呀!面試官說那是從後臺的角度來考慮的。從前端的角度呢?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 使用教程

寫的不好的地方,還請小夥伴們再評論區提出哦!

相關文章