????????12月20號(hào)發(fā)布的Safri瀏覽器內(nèi)核webkit表示自己開(kāi)始支持service workers牺丙,這就意味的主流瀏覽器(window下的chorme和Firefox丈秩,ios下的Safri,ie.....嗯苍糠,先不管他)都支持service workers木张,web app離線緩存頁(yè)面將不是夢(mèng)~
????????Service workers 其實(shí)是web workers中的一種類(lèi)型咳蔚,所以在學(xué)習(xí)使用service workers之前,我們先來(lái)看看web workers是啥锯茄,有哪些類(lèi)型厢塘,都能做些什么
整體介紹:
????????Web Workers 使script能夠單獨(dú)地運(yùn)行在一個(gè)獨(dú)立的線程中,這意味著我們可以將一些有復(fù)雜的邏輯計(jì)算的js放在其他線程下工作肌幽,而不去阻塞主線程(一般是ui渲染)的運(yùn)行
概念和使用:
????worker是通過(guò)構(gòu)造函數(shù)【Worker(filterName.js) 】生出來(lái)的Object晚碾,這個(gè)js文件里寫(xiě)的代碼會(huì)單獨(dú)運(yùn)行在一個(gè)新的執(zhí)行環(huán)境(context)中而不是當(dāng)前的window,這個(gè)工作環(huán)境其實(shí)是一個(gè)DedicatedWorkerGlobalScope對(duì)象喂急,(對(duì)于dedicated類(lèi)型的worker是他格嘁,對(duì)于shared類(lèi)型的worker是SharedWorkerGlobalScope).
????理論上在這個(gè)worker線程下你想干啥就干啥,但是還是有一些例外煮岁,比如讥蔽,你沒(méi)有辦法在worker中直接操作dom,也沒(méi)辦法使用window對(duì)象一些默認(rèn)的方法和屬性画机,不過(guò)呢冶伞,window下還是有很多功能你可以直接使用滴,像webSockets步氏,一些存儲(chǔ)工具indexedDB啊响禽,還有一個(gè)火狐瀏覽器搞的Data Store啊~,具體請(qǐng)參考?Functions and classes available to workers
????workers與主線程間通過(guò)messages渠道來(lái)傳遞數(shù)據(jù)荚醒,發(fā)送message的方法都是postMessage,接受數(shù)據(jù)都是通過(guò)監(jiān)聽(tīng)onmessage事件芋类,值得注意的是數(shù)據(jù)在傳輸時(shí)是通過(guò)復(fù)制的方法而不是共享~
????有的時(shí)候,workers可能會(huì)生成新的workers....界阁,只要這些構(gòu)建這些workers的js文件在同一源下就可以了侯繁。worker 可以通過(guò)XMLHttpRequest來(lái)訪問(wèn)網(wǎng)絡(luò),只是XMLHttpRequest的responseXML和channel這兩個(gè)屬性將總是null泡躯。
workers類(lèi)型
????除了dedicated(專(zhuān)用)類(lèi)型的workers,還有下面幾種類(lèi)型
? ? SharedWorkers
????????共享類(lèi)型的workers可以被好幾個(gè)scripts運(yùn)行在同一個(gè)源中不同的windows下贮竟,IFrames下丽焊,等等....,相比較dedicated workers咕别,shared workers更復(fù)雜一點(diǎn)是因?yàn)樵谶M(jìn)行傳輸時(shí)需要啟動(dòng)port技健,具體請(qǐng)參考SharedWorker
? ? ServiceWorkers
????????ServiceWorkers一般作為web應(yīng)用程序、瀏覽器和網(wǎng)絡(luò)(如果可用)之前的代理服務(wù)器惰拱。主要的作用是:
? ? ? ? ? ? 1.后臺(tái)消息傳遞
? ? ? ? ? ? 2.網(wǎng)絡(luò)代理雌贱,轉(zhuǎn)發(fā)請(qǐng)求,偽造響應(yīng)
? ? ? ? ? ? 3.離線緩存偿短,并且會(huì)在網(wǎng)絡(luò)是否合適的情況下采取合適的行動(dòng)更新駐留在服務(wù)器上的資源
? ? ? ? ? ? 4.消息推送
? ? Chrome Workers
ChromeWorker?是火狐瀏覽器自己弄出來(lái)的東西欣孤,如果您正在開(kāi)發(fā)附加組件,并且希望在擴(kuò)展程序中使用worker昔逗,同時(shí)在你的worker中有訪問(wèn)js-ctypes的權(quán)限导街,那么你可以使用它。
????Audio Workers
????????Audio Workers可以直接在web worker的上下文中完成腳本化音頻處理纤子。
簡(jiǎn)單示例鏈接
dedicatedWorkesr:?github地址搬瑰,在線實(shí)例
SharedWorkers:github地址,在線實(shí)例
ServiceWorkers:github地址控硼,在線實(shí)例
兼容性
源文章地址和參考資料:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API