前言
寫部落格主要是用來總結、鞏固知識點,加深自己對這個知識點的理解。同時希望幫助到有需要的人。如有不正確的地方。可以在評論區指出。你們的支援。是我不斷進步的源泉。
簡單說明下
這是一道面試題,剛開始面試官為我前端如何處理大量資料。我第一時間就脫口而出用分頁呀!面試官說那是從後臺的角度來考慮的。從前端的角度呢?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的作用了。
我這裡記錄的可能有點粗糙,更詳細的可以看下面這幾篇文章(當然,我是參考這幾篇文章的了)
寫的不好的地方,還請小夥伴們再評論區提出哦!