欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用JS中的webWorker

 更新時間：2021年05月14日 10:18:02   作者：猴子猿  
作為瀏覽器腳本語言，如果JavaScript不是單線程，那么就有點棘手了。比如，與用戶交互或者對DOM進行操作時，在一個線程上修改某個DOM，另外的線程刪除DOM，這時瀏覽器該如何抉擇呢?

一、webWorker之初體驗

所以，JavaScript是單線程也是有背景的。

如下：

<!DOCTYPE html>
    <head>
        <title>singleThread</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            //添加到任務隊列中，待同步任務所處的‘執(zhí)行棧'執(zhí)行完畢，1秒后執(zhí)行任務隊列中的這個匿名函數
            setTimeout(function(){
                console.log('come on');
            },1000);
            //只要不關閉該alert，‘執(zhí)行棧'就沒結束，從而也就不會進入到任務隊列中
            alert('waiting');
        </script>
    </body>
</html>

但，HTML5引入了一個工作線程（webWorker）的概念。它允許開發(fā)人員編寫能夠長時間運行而不被用戶所中斷的后臺程序，去執(zhí)行事務或者邏輯，并同時保證頁面對用戶的響應。

簡而言之，就是允許JavaScript創(chuàng)建多個線程，但是子線程完全受主線程控制，且不得操作DOM。

從而，可以用webWorker來處理一些比較耗時的計算。

如下，主頁面：

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                //創(chuàng)建一個Worker對象，并向它傳遞將在新線程中執(zhí)行的腳本url
                var worker = new Worker('worker.js');
                //接收worker傳遞過來的數據
                worker.onmessage = function(event){
                    document.getElementById('result').innerHTML+=event.data+"<br/>" ;
                };
            };
        </script>
    </head>
    <body onload = "init()">
        <div id="result"></div>
    </body>
</html>

下面是worker.js的內容:

var i = 0;
function timedCount(){
    for(var j = 0, sum = 0; j < 100; j++){
        for(var i = 0; i < 100000000; i++){
            sum+=i;
        };
    };
    //將得到的sum發(fā)送回主線程
    postMessage(sum);
};
//將執(zhí)行timedCount前的時間，通過postMessage發(fā)送回主線程
postMessage('Before computing, '+new Date());
timedCount();
//結束timedCount后，將結束時間發(fā)送回主線程
postMessage('After computing, ' +new Date());

上面代碼執(zhí)行的流程是：創(chuàng)建的worker對象，并用onmessage方法接收worker.js里面postMessage傳遞過來的數據(event.data)，并將數據追加到div#result中。

所以，執(zhí)行上面的代碼結果如下：

圖一

待worker.js中的timedCount方法運算完后，執(zhí)行postMessage操作，向主線程傳數據，得圖二。期間，并不影響主線程的運作。

圖二

二、webWorker之常用ＡＰＩ

接下來，再來看看關于worker的常用API：

1、postMessage(data)

子線程與主線程之間互相通信使用方法，傳遞的data為任意值。

//worker = new Worker('url');
//worker.postMessage傳遞給子線程數據，對象
worker.postMessage({first:1,second:2});

//子線程中也可以使用postMessage，如傳遞字符串
postMessage(‘test');

2、terminate()

主線程中終止worker，此后無法再利用其進行消息傳遞。注意：一旦terminate后，無法重新啟用，只能另外創(chuàng)建。

//worker = new Worker('url');
worker.terminate();

如，主頁面：

<!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');
                //每隔100毫秒，向子線程傳遞{name: 'monkey'}信息
                setInterval(function(){
                    worker.postMessage({name: 'monkey'});
                },100);
                //當主線程worker收到來自子線程的消息后，觸發(fā)message事件
                worker.onmessage = function(event){
                    document.getElementById('result').innerHTML+=event.data+"<br/>" ;
                    //主線程使用terminate方法中斷與子線程來往，在瀏覽器中只能顯示一次event.data
                    worker.terminate();
                };
            };
        </script>
    </head>
    <body onload = "init()">
        <div id="result"></div>
    </body>
</html>

子線程worker.js代碼：

//當主線程發(fā)來信息后，觸發(fā)該message事件
onmessage = function(event){
    //向主線程發(fā)送event.data.name信息
    postMessage(event.data.name);
};

3、message

當有消息發(fā)送時，觸發(fā)該事件。且，消息發(fā)送是雙向的，消息內容可通過data來獲取。

message使用，可見terminate中的demo

4、error

出錯處理。且錯誤消息可以通過e.message來獲取。

如下：

//worker = new Worker('url');
worker.onerror = function(e){
    //打印出錯消息
    console.log(e.message);
    //中斷與子線程的聯系
    worker.terminate();
}

另：worker線程從上到下同步運行它的代碼，然后進入異步階段來對事件及計時器響應，如果worker注冊了message事件處理程序，只要其有可能觸發(fā)，worker就一直在內存中，不會退出，所以通信完畢后得手動在主線程中terminate或者子線程中close掉，但如果worker沒有監(jiān)聽消息，那么當所有任務執(zhí)行完畢（包括計數器）后，他就會退出。

三、worker上下文

先看下面這段代碼：

主頁面：

<!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>

worker.js

//window對象的alert方法
alert(1);
onmessage = function(event){
    //向主線程發(fā)送event.data.name信息
    postMessage(event.data.name);
};

執(zhí)行上面代碼結果：

為什么會這樣呢？原因是alert為window對象的方法，所以會報錯undefined。

worker.js執(zhí)行的上下文，與主頁面html執(zhí)行時的上下文并不相同，最頂層的對象并不是window，woker.js執(zhí)行的全局上下文，是個叫做WorkerGlobalScope的東東，所以無法訪問window、與window相關的DOM API，但是可以與setTimeout、setInterval等協作。

WorkerGlobalScope作用域下的常用屬性、方法如下：

1、self

我們可以使用 WorkerGlobalScope 的 self 屬性來或者這個對象本身的引用

2、location

location 屬性返回當線程被創(chuàng)建出來的時候與之關聯的 WorkerLocation 對象，它表示用于初始化這個工作線程的腳步資源的絕對 URL，即使頁面被多次重定向后，這個 URL 資源位置也不會改變。

3、close

關閉當前線程，與terminate作用類似

4、importScripts

我們可以通過importScripts()方法通過url在worker中加載庫函數

5、XMLHttpRequest

有了它，才能發(fā)出Ajax請求

6、setTimeout/setInterval以及addEventListener/postMessage

四、關于worker

我們可以做什么：

1.可以加載一個JS進行大量的復雜計算而不掛起主進程，并通過postMessage，onmessage進行通信

2.可以在worker中通過importScripts(url)加載另外的腳本文件

3.可以使用setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest來發(fā)送請求

5.可以訪問navigator的部分屬性

局限性：

1.不能跨域加載JS

2.worker內代碼不能訪問DOM

3.各個瀏覽器對Worker的實現不大一致，例如FF里允許worker中創(chuàng)建新的worker,而Chrome中就不行

4.IE這個新特性

以上就是淺談webWorker的詳細內容，更多關于淺談webWorker的資料請關注腳本之家其它相關文章！

相關文章

最新評論