摘要:原因是,在內(nèi)部,是有效的全局作用域。錯(cuò)誤事件有以下三個(gè)核心的字段可讀性良好的錯(cuò)誤消息。發(fā)生錯(cuò)誤的腳本文件名。在傳遞消息之前,端口連接必須被顯式的打開(kāi),打開(kāi)方式是使用事件處理函數(shù)或者方法方式方式只在一種情況下需要,那就是消息事件被方法使用。
簡(jiǎn)介
??Web Worker可以理解為js在后臺(tái)線程中運(yùn)行的方法,它可以執(zhí)行js代碼而不阻塞用戶(hù)UI界面。一個(gè)Web Worker可以將消息發(fā)送到創(chuàng)建它的JavaScript代碼(只要運(yùn)行在同源的父頁(yè)面中,workers可以依次生成新的workers), 反之也可以從主線程接收消息
??注意:worker運(yùn)行在另一個(gè)全局上下文中,不同于當(dāng)前的window。因此,使用window快捷方式獲取當(dāng)前全局的范圍,在一個(gè)Worker內(nèi)將返回錯(cuò)誤(直接訪問(wèn)你需要訪問(wèn)的屬性即可!如:console而不是window.console)。
在WebWorker中有些方法和屬性是不能被訪問(wèn)的,比如BOM的一些API和DOM相關(guān)的一些API,localStorage,SessionStorage等,但是大部分的window對(duì)象是可以被訪問(wèn)的比如:Websocket,XMLHttpRequest(同樣不能跨域?)Console Api,Array,Date,Math,String等等,就是說(shuō)涉及到頁(yè)面操作和頁(yè)面中的對(duì)象統(tǒng)統(tǒng)不能被訪問(wèn),它的應(yīng)用場(chǎng)景是替代主線程執(zhí)行需要消耗頁(yè)面性能的代碼。這里有一份關(guān)于WebWorker允許訪問(wèn)的方法及屬性清單
主要wroker類(lèi)型常用worker為專(zhuān)用worker(僅在單一腳本中被使用)和共享worker(以同時(shí)被多個(gè)腳本使用);DedicatedWorkerGlobalScope和SharedWorkerGlobalScope對(duì)象分別代表它們的上下文
使用為了更好的錯(cuò)誤處理控制及向下兼容需要做些兼容檢測(cè)
if (window.Worker) { some codes ... }生成Worker
調(diào)用Worker()構(gòu)造函數(shù)創(chuàng)建一個(gè)Worker對(duì)象,該對(duì)象接收指定的URL腳本(腳本必須遵守同源策略否則將拋出錯(cuò)誤)
var myWorker = new Worker("worker.js");數(shù)據(jù)傳遞
??主線程和worker線程都使用postMessage()方法發(fā)送各自的消息,使用onmessage事件處理函數(shù)來(lái)響應(yīng)消息(消息被包含在Message事件的data屬性中),這個(gè)過(guò)程中數(shù)據(jù)并不是被共享而是被復(fù)制。在主線程中使用時(shí),onmessage和postMessage() 必須掛在worker對(duì)象上,而在worker中使用時(shí)不用這樣做。原因是,在worker內(nèi)部,worker是有效的全局作用域。
/*主線程*/ //發(fā)送數(shù)據(jù)至worker myWorker.postMessage("can you hear me?"); //從worker線程監(jiān)聽(tīng)接收數(shù)據(jù) myWorker.onmessage = function(e) { console.log(e.data);//"I can hear you!" } /*worker線程*/ //從主線程監(jiān)聽(tīng)接收數(shù)據(jù) onmessage = function(e) { console.log(e.data);//"can you hear me?" //發(fā)送數(shù)據(jù)至worker e.data && postMessage("I can hear you!"); }終止worker
如果你需要從主線程中立刻終止一個(gè)運(yùn)行中的worker,可以調(diào)用worker的terminate方法:
myWorker.terminate();//worker 線程會(huì)被立即殺死
在worker線程中,workers 也可以調(diào)用自己的close方法進(jìn)行關(guān)閉:
close();錯(cuò)誤處理
當(dāng)worker出現(xiàn)運(yùn)行中錯(cuò)誤時(shí),它的onerror事件處理函數(shù)會(huì)被調(diào)用。它會(huì)收到一個(gè)擴(kuò)展了 ErrorEvent 接口的名為 error的事件。該事件不會(huì)冒泡并且可以被取消;為防止觸發(fā)默認(rèn)動(dòng)作,worker可以調(diào)用錯(cuò)誤事件的preventDefault()方法。
錯(cuò)誤事件有以下三個(gè)核心的字段:
message
可讀性良好的錯(cuò)誤消息。
filename
發(fā)生錯(cuò)誤的腳本文件名。
lineno
發(fā)生錯(cuò)誤時(shí)所在腳本文件的行號(hào)。
如果需要worker能夠生成更多的worker。即subworker,但必須托管在同源的父頁(yè)面內(nèi)。注意:subworker解析 URI時(shí)會(huì)相對(duì)于父worker的地址而不是自身頁(yè)面的地址。這使得worker更容易記錄它們之間的依賴(lài)關(guān)系。
引入腳本與庫(kù)Worker 線程能夠訪問(wèn)一個(gè)全局函數(shù)importScripts()來(lái)引入腳本,該函數(shù)接受0個(gè)或者多個(gè)URI作為參數(shù)來(lái)引入資源;以下例子都是合法的:
importScripts();//什么都不引入 importScripts("foo.js");//只引入"foo.js importScripts("foo.js", "bar.js");//引入兩個(gè)腳本
注意: 腳本的下載順序不固定,但執(zhí)行時(shí)會(huì)按照傳入 importScripts() 中的文件名順序進(jìn)行。這個(gè)過(guò)程是同步完成的;直到所有腳本都下載并運(yùn)行完畢, importScripts() 才會(huì)返回。
關(guān)于共享worker一個(gè)共享worker可以被多個(gè)腳本使用——即使這些腳本正在被不同的window、iframe或者worker訪問(wèn)。
生成共享workervar myWorker = new SharedWorker("worker.js");//和專(zhuān)用worker不同構(gòu)造器為SharedWorker數(shù)據(jù)傳遞
和專(zhuān)用worker不同的是與一個(gè)共享worker通信必須通過(guò)端口對(duì)象即一個(gè)確切的打開(kāi)的端口供腳本與worker通信(在專(zhuān)用worker中這一部分是隱式進(jìn)行的)。
在傳遞消息之前,端口連接必須被顯式的打開(kāi),打開(kāi)方式是使用onmessage事件處理函數(shù)或者start()方法:
//方式1 myWorker.port.onmessage = function(e) { ... } //方式2(只在一種情況下需要,那就是消息事件被addEventListener()方法使用。) myWorker.port.start(); myWorker.port.addEventListener("message",function(e){ ... })
然后就可以像之前那樣發(fā)送和接收消息了,但是postMessage()方法必須被端口對(duì)象調(diào)用:
/*主線程*/ myWorker.port.postMessage("I posted some message!");//發(fā)送 myWorker.port.onmessage = function(e) {//監(jiān)聽(tīng)接收 ... } /*worker線程*/ onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerResult = "Result: " + (e.data[0] * e.data[1]); port.postMessage(workerResult); } }
在worker線程中需要注意的是:當(dāng)一個(gè)端口連接被創(chuàng)建時(shí)(例如:在父級(jí)線程中,設(shè)置onmessage事件處理函數(shù),或者顯式調(diào)用start()方法時(shí)),使用onconnect事件處理函數(shù)來(lái)執(zhí)行代碼。諸如postMessage()和onmessage也必須在端口連接上訪問(wèn)。
瀏覽器兼容 Desktop特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基礎(chǔ)支持 | 4 | 3.5 (1.9.1) | 10.0 | 10.6 | 4 |
共享worker | 4 | 29 | 未實(shí)現(xiàn) | 10.6 | 6.1 |
特性 | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
基礎(chǔ)支持 | 4.4 | 4 | 3.5 | 1.0.1 | 10.0 | 11.5 | 5.1 |
共享worker | 未實(shí)現(xiàn) | 4 | 8 | 1.0.1 | 未實(shí)現(xiàn) | 未實(shí)現(xiàn) | 未實(shí)現(xiàn) |
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/95847.html
摘要:如果返回的被拒,另一個(gè)同步事件被自動(dòng)地開(kāi)始重試操作,直到返回一個(gè)成功狀態(tài)的。推送機(jī)制使得服務(wù)器能夠向發(fā)送信息,然后將信息展示給用戶(hù)才是消息通知。然后它們可以發(fā)送消息通知,或者是更新的狀態(tài)。 原文地址:https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...
摘要:類(lèi)似于我們熟知的,可以脫離主線程,處理一些臟累活,干完后通過(guò)向主線程匯報(bào)工作結(jié)果。所以,也是脫離主線程的存在,與不同的是,具有持久化的能力。什么是 PWA Progressive Web App, 簡(jiǎn)稱(chēng) PWA,是「漸進(jìn)式」提升 Web App 體驗(yàn)的一種新方法,能給用戶(hù)類(lèi)似原生應(yīng)用的體驗(yàn)。 「高可靠,高性能,優(yōu)體驗(yàn)」是 PWA 慣用的形容詞,他的另外一個(gè)優(yōu)點(diǎn)就是「漸進(jìn)式」,開(kāi)發(fā)者可以對(duì)照 ...
閱讀 1323·2021-09-22 15:00
閱讀 3316·2019-08-30 14:00
閱讀 1233·2019-08-29 17:27
閱讀 1228·2019-08-29 16:35
閱讀 702·2019-08-29 16:14
閱讀 2048·2019-08-26 13:43
閱讀 2129·2019-08-26 11:35
閱讀 2314·2019-08-23 15:34