成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript之Web Worker

BigNerdCoding / 3030人閱讀

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

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

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

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

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

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

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

安裝http-server

Worker 線程無法讀取本地文件，即不能打開本機的文件系統(tǒng)（file://），它所加載的腳本，必須來自網(wǎng)絡(luò)。所以我們得起一個項目。使用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);
    // 發(fā)送數(shù)據(jù)事件
    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來監(jiān)聽數(shù)據(jù)，通過postMessgae來發(fā)送數(shù)據(jù)

終止 worker 
worker.terminate();
處理錯誤 
worker.addEventListener("error",  (e) => {
  console.log("main error", "filename:" + e.filename + "message:" + e.message + "lineno:" + e.lineno;
});

event.filename: 導(dǎo)致錯誤的 Worker 腳本的名稱；

event.message: 錯誤的信息；

event.lineno: 出現(xiàn)錯誤的行號；

加載外部腳本

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97704.html

相關(guān)文章

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

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

    cartoon 評論0 收藏0

  • 構(gòu)建 Web 應(yīng)用之 Service Worker 初探

    摘要：誕生之初，是單線程的。當接收到服務(wù)端的響應(yīng)之后，便通過回調(diào)函數(shù)執(zhí)行之后的操作。沖鋒基于事件驅(qū)動。擁有攔截請求消息推送靜默更新地理圍欄等服務(wù)?？刂茣r處于兩種狀態(tài)之一終止以節(jié)省內(nèi)存監(jiān)聽獲取和消息事件。支持的所有事件五銷毀瀏覽器決定是否銷毀。 這次體驗一種新的博客風(fēng)格，我們長話短說，針針見血。 showImg(https://segmentfault.com/img/remote/14600...

    voidking 評論0 收藏0

  • 漫談前端性能 突破 React 應(yīng)用瓶頸

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

    whlong 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<