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

資訊專(zhuān)欄INFORMATION COLUMN

Web Worker API

kidsamong / 2952人閱讀

摘要:原因是,在內(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)。

worker中可用函數(shù)和接口

在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能夠生成更多的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)。

生成共享worker
var 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
Mobile
特性 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

相關(guān)文章

  • [翻譯]Service workers:PWA背后的英雄

    摘要:如果返回的被拒,另一個(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-...

    snifes 評(píng)論0 收藏0
  • PWA 知不知

    摘要:類(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ì)照 ...

    MartinDai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<