Web workerの概要

Web workerの概要
通常、ブラウザがプログラムを実行すると、実行が終了するまで通常の状態に戻るのがブロックされますが、HTML 5のWeb Workerはこの問題を解決するためです.ワークスレッドによる密計算を完了し、プログラムのブロックやページのカートン(fpsが低すぎる)を回避
例
fibonacci数列を用いてテストをシミュレートする
worker-test.html

    
    



    
        function fibonacci(n) {
            return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
        }


        function testNoWorker() {
            let start = Date.now();
            fibonacci(38);
            let end = Date.now();
            console.log(end - start); // wait a long time..
        }

        function testUseWorker() {
            let start = Date.now();
            let worker = new Worker('worker.js');
            worker.postMessage(38);
            worker.addEventListener('message', function (event) {
                let end = Date.now();
                console.log('worker result: ', end -start);
            });
            console.log('can do other jobs, when worker is computing');
        }

        testNoWorker();
        testUseWorker();
    

worker.js

function fibonacci(n) {
    return n < 2 ? n : arguments.callee(n-1) + arguments.callee(n-2);
}

self.addEventListener('message', function (event) {
    let result = fibonacci(event.data);
    self.postMessage(result);
});



//    setTimeout , setInterval
setTimeout(() => {
    console.log('timeout..');
}, 100);

setInterval(() => {
    console.log('setInterval...');
}, 200);

//    ajax
fetch('data.json').then(res => res.json()).then(data => {console.log(data, '

ホームページ上で時間のかかる操作(fibonacciなど)を複数回実行する必要があると仮定すると、以下のようにworkerで非同期で実行することができる.

    
    



    
        function fibonacci(n) {
            let start = Date.now();
            let worker = new Worker('worker.js');

            worker.addEventListener('message', function (event) {
                let end = Date.now();
                console.log('worker result: ', end - start);
            });
            worker.postMessage(n);
        }

        /*      worker,      worker     ；          */
        fibonacci(38);
        console.log('after one');
        
        fibonacci(38);
        console.log('after two');
        
        fibonacci(38);
        console.log('after three');

        console.log('can handle other jobs..');


    

ドメイン間およびスクリプトの導入
ホームフェースでworkerをインスタンス化するには、new Worker('/url/to/worker.js') workerスクリプトをホームフェースと同じドメインにする必要があります.workerスクリプトでは、self.importScripts('url/to/script.js')は任意のドメインのスクリプトをインポートできます.複数のself.importScripts()は順次同期ロードされます.
ワークの方法

worker.terminate() workerスレッド

を終了する
制限

ホームページのグローバル変数と関数にアクセスできません.window、documentがありません.ただし、location、navigator

にアクセスできます.

はsettimeout、setIntervalをサポートし、ajax

を開始することができる.

workerはdom

にアクセスおよび操作できません.

postMessageが送信するデータはコピーされ、同じメモリアドレス

を指すことはありません.
転載先:https://www.cnblogs.com/stephenykk/p/8608450.html