大家都知道js是單線程的,在上一段js執行結束之前,后面的js絕對不會執行,那么為什么標題說js實現‘多線程’,雖然說加了引號,可是標題也不能亂寫不是,可惡的標題黨?
姑且拋開標題不說,先說我們經常會遇到的一個問題,假如我們頁面中有很多js要執行,比如頁面加載或點擊某個按鈕就會觸發js,最壞的結果就是在很長的一段時間內用戶都不能進行任何操作,所以,退出,關閉。。
當然上面說的有一些誇張,但是比如在移動端,我們都會想辦法不停的提高頁面性能,在某些情況下如果能有類似多線程的解決辦法就更好了~
html5 提出了一個名詞:web Worker,按照官方的解釋:web worker 是運行在后台的 JavaScript,不會影響頁面的性能。也就可以理解為兩段js同時執行,是不是也可以稱呼為‘多線程’了呢,所以看標題……
今天主要來看一下基本用法:
首先是我們的前台頁面,假設我們有一段計算的代碼比較耗時,這時候我們需要后台的一個cal.js來計算。
在我們的前台頁面,我們這樣寫:
var worker=new Worker(cal.js'),
i=100000000,
ele=document.getElementById(‘btn’);
//當點擊某個按鈕時,執行某個計算
ele.addEventListener(‘click’,function(){
worker.postMessage(i);
worker.onmessage=function(e){
alert(e.data)
}
},false)
在cal.js中我們就進行計算
onmessage=function(e){
var data=e.data;
for(i=0;i<data;i++){
//計算的代碼
}
postMessage(data)
}
這樣一個簡單的worker就實現了,通過點擊按鈕,后台的cal.js執行計算,而不會影響前台的操作;
簡單總結一下,worker方法主要包括:
前台頁面:
- 通過 new Worker( js) 加載一個JS文件來創建一個worker並返回一個worker實例。
- 通過worker.postMessage( data ) 方法來向worker發送數據。
- 通過worker.onmessage方法來接收worker發送過來的數據。
- worker.terminate() 可以終止worker
后台js:
- 通過postMessage( data ) 方法來向主線程發送數據。
- 綁定onmessage方法來接收主線程發送過來的數據。