由于瀏覽器中負責渲染/監(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元素中。