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