07WebWorker

由于瀏覽器中負責渲染/監(jiān)聽只有一個UI主線程,所有的HTML/CSS/JS的執(zhí)行都在這一個線程內(nèi)萧锉,若頁面中加載了非常耗時(算法復雜)的JS操作述寡,會阻塞后續(xù)的HTML/CSS/JS的渲染和事件監(jiān)聽叶洞。

如何解決禀崖?—— 創(chuàng)建一個新的并發(fā)線程來執(zhí)行這樣的耗時操作。

JS中沒有創(chuàng)建新線程的方法,替代方案——Web Worker

var w = new Work( 'xx.js' );

含義:在當前UI主線程中創(chuàng)建并啟動一個新的并發(fā)的工作線程不恭,該線程執(zhí)行耗時操作,可能阻塞折晦;但不會對當前UI主線程產(chǎn)生影響沾瓦。

注意:Worker線程的致命問題——不能執(zhí)行任何DOM操作,不能使用任何DOM&BOM元素——瀏覽器中只允許UI主線程修改DOM樹风喇。jQuery之類的JS文件決不能使用Worker來執(zhí)行B铺健!

(1)如何讓UI主線程給Worker線程傳遞數(shù)據(jù):

UI主線程:

var w = new Work('xx.js');
w.postMessage('data');  

Worker線程:

onmessage = function(event){
  var data = event.data;
}
(2)如何讓Worker線程把運算結果傳遞給UI主線程:

Worker線程:

postMessage('data');

UI主線程:

var w = new Worker('xx.js');
w.onmessage = function(event){
  var data = event.data;
}

練習:UI主線程中讀取用戶輸入耙考,發(fā)送給Worker線程潭兽;Worker線程開始運算,完畢后鞋邑,把運算結果發(fā)送回給UI主線程账蓉,顯示在DIV元素中。

總結:Worker用于執(zhí)行耗時的JS任務视译,在一個獨立的線程中归敬,可以避免UI主線程的阻塞問題鄙早。
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末限番,一起剝皮案震驚了整個濱河市呀舔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌媚赖,老刑警劉巖惧磺,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異缤底,居然都是意外死亡番捂,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門坑鱼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來絮缅,“玉大人,你說我怎么就攤上這事画恰∥” “怎么了?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵考润,是天一觀的道長读处。 經(jīng)常有香客問我罚舱,道長绎谦,這世上最難降的妖魔是什么粥脚? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮刷允,結果婚禮上树灶,老公的妹妹穿的比我還像新娘。我一直安慰自己破托,他們只是感情好歧蒋,可當我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布谜洽。 她就那樣靜靜地躺著,像睡著了一般序臂。 火紅的嫁衣襯著肌膚如雪实束。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天构订,我揣著相機與錄音避矢,去河邊找鬼悼瘾。 笑死,一個胖子當著我的面吹牛审胸,可吹牛的內(nèi)容都是我干的亥宿。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼砂沛,長吁一口氣:“原來是場噩夢啊……” “哼烫扼!你這毒婦竟也來了?” 一聲冷哼從身側響起碍庵,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤材蛛,失蹤者是張志新(化名)和其女友劉穎圆到,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卑吭,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡芽淡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年豆赏,在試婚紗的時候發(fā)現(xiàn)自己被綠了挣菲。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡掷邦,死狀恐怖白胀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情抚岗,我是刑警寧澤或杠,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站宣蔚,受9級特大地震影響向抢,放射性物質發(fā)生泄漏。R本人自食惡果不足惜胚委,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一挟鸠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧亩冬,春花似錦艘希、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至营袜,卻和暖如春撒顿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背连茧。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工核蘸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人啸驯。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓客扎,卻偏偏與公主長得像,于是被迫代替她去往敵國和親罚斗。 傳聞我的和親對象是個殘疾皇子徙鱼,可洞房花燭夜當晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容