Web Worker

時間 2020-05-20

標籤 web worker 欄目 HTML 简体版

原文原文鏈接

Web Worker 讓你在後臺運行JS代碼。
html

通常地，JavaScript和頁面UI會共用一個線程，當JavaScript在運行的時候，頁面是不響應用戶的任何操做的。這個時候，這段代碼就能夠交給Web Worker來完成，不會影響頁面交互。
java

Web Worker 沒法訪問DOM節點
跨域

Web Worker 沒法訪問window、document之類的瀏覽器全局變量瀏覽器

Web Worker 沒法訪問全局變量或全局函數ide

Web Worker 沒法使用 alert（），confirm（）等函數

1.經常使用API
post

（1）postMessage(data)ui

子線程與主線程之間互相通訊使用方法，傳遞的data爲任意值url

//worker = new Worker('url');
//worker.postMessage傳遞給子線程數據，對象
worker.postMessage({first:1,second:2});
//子線程中也能夠使用postMessage，如傳遞字符串
postMessage(‘test’);

(2)terminate()spa

線程中終止worker，此後沒法再利用其進行消息傳遞。注意：一旦terminate後，沒法從新啓用，只能另外建立。

 function init(){                
      var worker = new Worker('worker.js');                
     //每隔100毫秒，向子線程傳遞{name: 'monkey'}信息                
      setInterval(function(){
           worker.postMessage({name: 'monkey'});
      },100);                
      //當主線程worker收到來自子線程的消息後，觸發message事件  
      worker.onmessage = function(event){                                
            document.getElementById('result').innerHTML+=event.data+"<br/>" ;                   //主線程使用terminate方法中斷與子線程來往，在瀏覽器中只能顯示一次event.data                    worker.terminate();
         };
    };

3.Web Worker 上下文

onmessage() //接收消息事件

onerror() //錯誤消息事件

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                var worker = new Worker('worker.js');
                //接收消息事件
                worker.onmessage = function(event){
                    console.log(event.data);
                };
                //錯誤信息事件
                worker.onerror = function(e){
                    console.log('erro: ' + e.message);
                    //終止線程
                    worker.terminate();
                };
            };
        </script>
    </head>
    <body onload = "init()">
        
    </body>
</html>

咱們能夠作什麼：

　　1.能夠加載一個JS進行大量的複雜計算而不掛起主進程，並經過postMessage，onmessage進行通訊

　　2.能夠在worker中經過importScripts(url)加載另外的腳本文件

　　3.能夠使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

　　4.能夠使用XMLHttpRequest來發送請求

　　5.能夠訪問navigator的部分屬性

侷限性：

　　1.不能跨域加載JS

　　2.worker內代碼不能訪問DOM

　　3.各個瀏覽器對Worker的實現不大一致，例如FF裏容許worker中建立新的worker,而Chrome中就不行

　　4.IE這個新特性