HTML5中Js多線程編程

時間 2019-12-07

原文原文鏈接

Web Worker

Web Worker是HTML5提出的新標準，爲 JavaScript 創造多線程環境，容許主線程建立 Worker 線程，將一些任務分配給後者運行。在主線程運行的同時，Worker 線程在後臺運行，二者互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 線程負擔了，主線程（一般負責 UI 交互）就會很流暢，不會被阻塞或拖慢。html

注意

1.性能上要注意nginx

Worker 線程一旦新建成功，就會始終運行，不會被主線程上的活動（好比用戶點擊按鈕、提交表單）打斷。這樣有利於隨時響應主線程的通訊。可是，這也形成了 Worker 比較耗費資源，不該該過分使用，並且一旦使用完畢，就應該關閉。web

2.同源限制chrome

分配給 Worker 線程運行的腳本文件，必須與主線程的腳本文件同源。瀏覽器

3.DOM限制網絡

Worker 線程所在的全局對象，與主線程不同，沒法讀取主線程所在網頁的 DOM 對象，也沒法使用document、window、parent這些對象。可是，Worker 線程能夠navigator對象和location對象。多線程

4.通訊聯繫函數

Worker 線程和主線程不在同一個上下文環境，它們不能直接通訊，必須經過消息完成。post

5.腳本限制性能

Worker 線程不能執行alert()方法和confirm()方法，但可使用 XMLHttpRequest 對象發出 AJAX 請求。

6.文件限制

Worker 線程沒法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。

Demo

關於這個demo又幾點須要注意的地方。

因Web Worker是HTML5的新標準因此ECMAScript的標準語法中並不支持，這個demo實在瀏覽器上進行測試，支持HTML的瀏覽器除IE外都能很好的兼容Web Worker，IE10部分兼容。我這裏選擇的chrome進行測試。
因爲Worker構造函數不能讀取本地文件，關於worker線程的腳本文件須要經過網絡下載，不然會報404（這點須要特別注意下）

爲了順利測試解決worker線程的腳本須要經過網絡下載的問題這裏我將WebWorkerDemo部署到本機的nginx上面使用chrom進行訪問

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn1">start worker!</button>
<button id="btn2">postMessage Main====>worker</button>
<button id="btn3">stop worker!</button>

<script src="main.js"></script>
</body>
</html>

main.js

(function() {
    let startWorker = document.querySelector('#btn1');
    let postMessage = document.querySelector('#btn2');
    let stopWorker = document.querySelector('#btn3');
    let worker;
    let data = 10;

    startWorker.addEventListener('click', () => {
        worker = new Worker('worker1.js');
        worker.addEventListener('message', (event) => {
            console.log(event.data);
            if (!event.data) {
                console.log('closes worker thread');
                worker.terminate();
            }
        }, false);

    });

    postMessage.addEventListener('click', () => {
        worker.postMessage(data);
    });

    stopWorker.addEventListener('click', () => {
        worker.terminate();
    });
}());

worker1.js

(function () {
    console.log('start worker');
    this.addEventListener('message', (event) => {
        let count = event.data;
        setInterval(() => {
            postMessage(count--);
        }, 1000);
    }, false);
}());