web Worker使js實現‘多線程’?


      大家都知道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方法來接收主線程發送過來的數據。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM