Web Workers

1.JS單線程

說起Web Workers,首先必須了解因為JS運行在瀏覽器中,是單線程的,每個window一個JS線程,既然是單線程的,在某個特定的時刻只有特定的代碼能夠被執行,并阻塞其它的代碼。而瀏覽器是事件驅動的(Event driven),瀏覽器中很多行為是異步(Asynchronized)的,會創建事件并放入執行隊列中。javascript引擎是單線程處理它的任務隊列,你可以理解成就是普通函數和回調函數構成的隊列。當異步事件發生時,如mouse click, a timer firing, or an XMLHttpRequest completing(鼠標點擊事件發生、定時器觸發事件發生、XMLHttpRequest完成回調觸發等),將他們放入執行隊列,等待當前代碼執行完成。

2.Web Workers(多線程)

什么是Web Worker?

web worker 是運行在后臺的 JavaScript,獨立于其他腳本,不會影響頁面的性能。您可以繼續做任何愿意做的事情:點擊、選取內容等等,而此時 web worker 在后臺運行。

有什么好處?

1:子線程計算不會阻塞主線程

2:充分利用CPU!

OK,現在來具體實現多線程!

var oW = new Worker('a.js');
//a.js是子線程js文件,代表的是后臺需要處理的地址
oW.postMessage(12);
//在多線程里,利用postMessage來傳輸數據

下面來寫a.js文件。

//用onmessage事件來接收數據,ev.data代表的是接收過來的數據,這里指主線程發過來的12
self.onmessage=function(ev){
//self指全局worker對象(用this也行)
  alert(ev.data)
}

這里需要注意的是上面在子線程里用alert是錯誤的。

安全與限制

在worker的代碼中,不要訪問一些重要的JavaScript對象,如document、window、console、parent,更重要的是不要訪問DOM對象。也許不用DOM元素以至不能更新頁面元素聽上去有點嚴格,但是這是一個重要的安全設計決定。

想象一下,如果眾多線程都試著去更新同一個元素那就是個災難。所以,web worker需要處在一個嚴格的并線程安全的環境中。

正如之前所說,你可以通過worker處理數據,并將結果返回主線程,進而更新DOM元素。盡管它們不能訪問一些重要的JavaScript對象,但是它們可以調用一些函數,如setTimeout()/clearTimeout()、setInterval()/clearInterval()、navigator等等,也可以訪問XMLHttpRequest和localStorge對象。

為了能和服務器交互,worker必須遵守同源策略(same-origin policy)(譯注:可參考國人文章同源策略)。比如,位于http://www.example.com/ 內的腳本文件不能訪問https://www.example.com 的腳本。盡管域名相同,但同源策略要求端口也必須一致。通常,這不會成為一個很大的問題。但是你很有可能會同一個域名編寫worker和client,所以知道這點對你總是有所幫助。

整體Worker具體步驟就是這樣的 ,下面完整寫一個主線程發給子線程一個數組數據,然后子線程處理數據數據并發回主線程的代碼。

//開啟了子線程
var arr = [12,5,8];
var oW = new Worker('d.js');
//發送
oW.postMessage(arr)
oW.onmessage = function (ev) {
   alert(ev.data);//666,5,8
};
console.log(arr);//12,5,8
//主線程和子線程有它們各自的獨立空間,信息主要是來回交換而不是共享。

d.js文件

self.onmessage = function(ev){
      ev.data[0] = 666;
      this.postMessage(ev.data);
};

當然,Workers不是簡簡單單修改一個數組這么簡單了,那么什么時候可以用到多線程呢?

worker的實際發生場景可能是,你需要處理一個同步的第三方接口,于是主線程需要等待結果再進行下一步操作。這種情況下,你可以生成一個worker,由它代理,異步完成此任務。

Web worker在輪詢情況下也非常適用,你可以在后臺不斷查詢目標,并在有新數據時向主線程發送消息。

你也許遇到需要向服務端返回大量的數據的情況。通常,處理大量數據會消極影響程序的響應能力,然后導致不良用戶體驗。更優雅的辦法是將處理工作分配給若干worker,由它們處理不重疊的數據。

還有應用場景會出現在通過多個web worker分析音頻或視頻的來源,每個worker針對專項問題。

譯注:本人不是什么大牛,只是一個一直在學習的小程序員,如果文章內容當中有什么不對的地方請與我討論,共同進步!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容

  • 當瀏覽器切換到后臺運行,操作系統會把瀏覽器掛起,掛起之后,比如定時器,在回到原來頁面的時候,會出現獲取秒有重復的問...
    殷灬商閱讀 534評論 1 3
  • Web Workers可以讓web應用程序具備后臺處理能力,使用Worker類加載一個javascript文件來開...
    幸福鐮刀閱讀 745評論 1 0
  • “Web Workers”在WHATWG里已經是LS,被大多數瀏覽器支持,詳細可看caniuse。 在講述Web ...
    butterandfly閱讀 532評論 0 1
  • 小城市真的安靜的特別早。 晚上一個人騎自行車總是習慣音量開到很大,大到根本聽不到外界的聲音。就這樣一直騎著騎著。 ...
    城市花大姐閱讀 576評論 0 49
  • 最近幾天經常做關于一個朋友的夢。 簡稱她為xd,我們是高中同學,高一結束時我們分到了一個班里,神奇的是我們高二升...
    想不出昵稱的狗閱讀 161評論 0 1