web worker 简介

时间：2018-03-20 12:36:52 收藏：0 阅读：225

web worker 简介

通常，浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态，而HTML5的Web Worker就是为了解决这个问题。通过worker线程完成密集计算，避免程序的阻塞和页面的卡顿(fps过低)

示例

用fibonacci数列来模拟测试

worker-test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试 web worker</title>
</head>

<body>
    <script>
        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();
    </script>
</body>

</html>

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);
});

假设主页面需要多次执行耗时的操作(如: fibonacci), 可如下用worker来异步执行.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试 实例化多个 web worker</title>
</head>

<body>
    <script>
        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..‘);


    </script>
</body>

</html>

原文：https://www.cnblogs.com/stephenykk/p/8608450.html