JavaScript之Web Worker

BigNerdCoding 發布于2019-08-23 11:56 / 3008人閱讀

摘要：使用要點同源限制分配給線程運行的腳本文件，必須與主線程的腳本文件同源。限制線程所在的全局對象，與主線程不一樣，無法讀取主線程所在網頁的對象，也無法使用這些對象。通信聯系線程和主線程不在同一個上下文環境，它們不能直接通信，必須通過消息完成。

介紹

Web Worker為Web內容在后臺線程中運行腳本提供了一種簡單的方法。線程可以執行任務而不干擾用戶界面。此外，他們可以使用XMLHttpRequest執行 I/O  (盡管responseXML和channel屬性總是為空)。一旦創建， 一個worker 可以將消息發送到創建它的JavaScript代碼, 通過將消息發布到該代碼指定的事件處理程序（反之亦然）。

Web Worker使用要點

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

DOM 限制：Worker 線程所在的全局對象，與主線程不一樣，無法讀取主線程所在網頁的 DOM 對象，也無法使用document、window、parent這些對象。但是，Worker 線程可以navigator對象和location對象。

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

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

文件限制：Worker 線程無法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。后面我們允許會做處理。

安裝http-server

Worker 線程無法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。所以我們得起一個項目。使用http-server最簡單
安裝：

> cnpm i -g http-server

使用：

> http-server

基本使用

我們新建一個文件夾名叫worker，里面新建三個文件分別是

index.html
main.js
worker.js

新建一個worker線程很簡單，只需：

var worker = new Worker("worker.js")

main.js:

var worker = new Worker("./worker.js")
console.log("worker running")
worker.addEventListener("message",e => {
    console.log("main: ", e.data);
})
// 也可使用：
// worker.onmessage = (e)=>{
//     console.log("main: ", e.data);
// }
worker.postMessage("hello worker,I am from main.js")

worker.js:

console.log("worker task running")
onmessage = (e)=>{
    console.log("worker task receive", e.data);
    // 發送數據事件
    postMessage("Hello, I am from Worker.js");
}

在worker文件夾下，命令行輸入http-server,啟動項目，用瀏覽器打開，看控制臺：

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

從上面可以看到，worker通過onmessage來監聽數據，通過postMessgae來發送數據

終止 worker

worker.terminate();

處理錯誤

worker.addEventListener("error",  (e) => {
  console.log("main error", "filename:" + e.filename + "message:" + e.message + "lineno:" + e.lineno;
});

event.filename: 導致錯誤的 Worker 腳本的名稱；

event.message: 錯誤的信息；

event.lineno: 出現錯誤的行號；

加載外部腳本

main.js

var worker = new Worker("./worker1.js");

worker1.js

console.log("I"m worker1")
importScripts("worker2.js", "worker3.js");
// 或者
// importScripts("worker2.js");
// importScripts("worker3.js");

worker2.js

console.log("I"m worker2")

worker3.js

console.log("I"m worker3")

兼容性

https://caniuse.com/#feat=webworkers
兼容性還不是很樂觀，不過在移動端的兼容性還不錯

參考

使用 Web Workers
Web Worker 使用教程

Github

wclimb

云服務器 GPU云服務器 web-worker web前端javascript worker apache worker

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97704.html

JavaScript 工作原理之七－Web Workers 分類及 5 個使用場景

摘要：最后，我們將會介紹個的使用場景。異步編程的局限性前面我們了解到異步編程及其使用時機。請求是一個很好的異步編程的使用場景。整個是基于單線程環境的而部分可以突破這方面的限制。最佳使用場景迄今為止，我們列舉了的長處及其限制。 Web Workers 分類及 5 個使用場景原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。這是 JavaScri...

cartoon 2019-08-22 17:23 評論0 收藏0
構建 Web 應用之 Service Worker 初探

摘要：誕生之初，是單線程的。當接收到服務端的響應之后，便通過回調函數執行之后的操作。沖鋒基于事件驅動。擁有攔截請求消息推送靜默更新地理圍欄等服務。控制時處于兩種狀態之一終止以節省內存監聽獲取和消息事件。支持的所有事件五銷毀瀏覽器決定是否銷毀。這次體驗一種新的博客風格，我們長話短說，針針見血。 showImg(https://segmentfault.com/img/remote/14600...

voidking 2019-08-21 16:50 評論0 收藏0
漫談前端性能突破 React 應用瓶頸

摘要：表示調用棧在下一將要執行的任務。兩方性能解藥我們一般有兩種方案突破上文提到的瓶頸將耗時高成本高易阻塞的長任務切片，分成子任務，并異步執行這樣一來，這些子任務會在不同的周期執行，進而主線程就可以在子任務間隙當中執行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以來是前端開發中非常重要的話題...

whlong 2019-08-26 12:10 評論0 收藏0