HTML5中Js多線程編程

Web Worker

Web WorkerHTML5提出的新標準,為 JavaScript 創造多線程環境,允許主線程創建 Worker 線程,將一些任務分配給后者運行。在主線程運行的同時,Worker 線程在后臺運行,兩者互不干擾。等到 Worker 線程完成計算任務,再把結果返回給主線程。這樣的好處是,一些計算密集型或高延遲的任務,被 Worker 線程負擔了,主線程(通常負責 UI 交互)就會很流暢,不會被阻塞或拖慢。

注意

1.性能上要注意

Worker 線程一旦新建成功,就會始終運行,不會被主線程上的活動(比如用戶點擊按鈕、提交表單)打斷。這樣有利于隨時響應主線程的通信。但是,這也造成了 Worker 比較耗費資源,不應該過度使用,而且一旦使用完畢,就應該關閉。

2.同源限制

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

3.DOM限制

Worker 線程所在的全局對象,與主線程不一樣,無法讀取主線程所在網頁的 DOM 對象,也無法使用documentwindowparent這些對象。但是,Worker 線程可以navigator對象和location對象。

4.通信聯系

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

5.腳本限制

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

6.文件限制

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

 

Demo

關于這個demo又幾點需要注意的地方。

  1. Web Worker是HTML5的新標準所以ECMAScript的標準語法中并不支持,這個demo實在瀏覽器上進行測試,支持HTML的瀏覽器除IE外都能很好的兼容Web Worker,IE10部分兼容。我這里選擇的chrome進行測試。

  2. 由于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);
}());

運行結果

 

Node.js的線程和進程

了解一下

Node.js的線程和進程

參考

MDN

Web Worker 使用教程

posted @ 2019-05-05 16:14  siegaii  閱讀(...)  評論(...編輯  收藏
内蒙古快3开奖结果 河北十一选五网址 广西快乐十分和值推荐号码 安顺捉鸡麻将 麻将来了 上海快三遗漏数据查询 福利彩票排列7开奖结果 女排世界杯直播 德国足球队队员名单 理财平台排名2018 什么叫理财如何理财 金巷子配资 山水云南麻将昆明麻 北京快三开奖一定牛 湖北十一选五推荐号 配资炒股是不是不用自己的账号 nba球员年薪排名