1. 程式人生 > >談談javascript中的多執行緒

談談javascript中的多執行緒

不存在的,javascript中根本不存在多執行緒......

先不要慌,沒有多執行緒我們可以模仿多執行緒呀!定時器、web workder等等。

存在即合理,為啥javascript需要多執行緒?

javascript對於現如今的web應用是不可或缺的,js在其中肩負了所有的互動和邏輯運算。由於瀏覽器在執行頁面的javascript期間無法響應其他的使用者事件,當頁面中某部分js程式碼不可避免的要進行大開銷的運算時瀏覽器本身可能變得非常緩慢甚至完全卡死,因此javascript的效能對於應用的流暢及使用者體驗至關重要。而多執行緒能解決這個問題。

但是就依據目前的發展來看,javascript中的多執行緒短時間內將不會實現。不過我們有備選方案。多執行緒的基本問題是不同的執行緒可以訪問並修改相同的變數,當出現執行緒A要修改執行緒B正在修改的變數或類似的情況時,這回導致各種各樣的問題。

定時器:

在web workers之前有一種方法是通過簡單地把執行時間很長的計算拆分成獨立的區塊,然後使用js的定時器控制其執行:

var functionState = {};

function expensiveOperation() {
    var startTime = new Date().getMilliseconds();
    while ((new Date().getMilliseonds() - startTime) < 100) {
        //TODO:它用如下方法執行開銷很大的運算
        //在迭代的語句塊中執行100毫秒內完成的工作,
        //然後修改本函式外部“functionState”中的狀態
        
    };
    if(!functionsState.isFinished){
        //退出10毫秒後再次執行expensiveOperation;
        setTimeout(expensiveOperation(), 10);
    };
};

用以上這種拆分模組運算的方法能夠實現快速響應的介面,但是用這種方法架構運算可能不那麼直接(甚至不可行)。同時現代計算機基本都是“多核”的,這意味著他們真正具備併發執行多個執行緒的能力。而如上使用延時器強制多核中的一個來完成所有的運算,這是在浪費計算機的處理能力。因此在javascript中模擬多執行緒時使用worker會更加容易且高效。

Web Workers

以下程式碼展示瞭如何建立並啟動Worker:

//建立並開始執行worker
var worker = new Worker("js/decrypt.js");

//註冊事件處理程式,當worker給主執行緒傳送資訊時執行
worker.onmessage = function(e) {
    alert("the decrypted value is " + e.data);
};

//傳送資訊給worker,這裡是指帶解密的值
worker.postMessage(getValueToDecrypt());

接下來看一下設想中的 js/decrypt.js的內容:

//註冊用來接收主執行緒資訊的處理程式
onmessage = function (e) {
    var valueToDecrypt = e.data;
    //這裡實現解密功能

    //把值返回給主執行緒
    postMessage(decryptedValue);
};

在頁面上任何開銷很大的(例如,長時間執行)javascript操作都應該委託給Worker,因為這將使得應用程式快速執行。