前端如何處理十萬的大量數據職場頭條網

2019-04-23 06:37:00 破影閣

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

 
 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的情況


 
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);
};
複製代碼

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);
}
複製代碼