Web Worker之HelloWorld

来源：互联网发布：sql整形是多少位编辑：程序博客网时间：2024/06/05 14:37

首先, WebWorker是什么? Web Worker.
因为之前有学过多线程, 个人感觉Worker给前端提供了类似多线程的接口, 最大的好处就是在进行大量数据处理的时候不会导致浏览器UI冻结. 为什么是类似呢? 因为虽然Worker也属于JavaScript的范畴, 但是它却有一些比较严重的限制: Web Worker的限制条件.

话不多说, 看代码.

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Web Worker HelloWorld Page</title></head><body>    <div class="container">        <form>            <input type="number" min="0" max="50" value="5" id="fibonacciBase">        </form>        <hr>        <span>the result is: </span>        <output id="output"></output>    </div>    <script src="fibonacci.js"></script>    <script>    output.innerText = fibonacci(fibonacciBase.value);    function fillData(data, container) {        container.innerText = data;    }    var worker = new Worker("retFibonacciResult.js");    fibonacciBase.onchange = function(e) {        // fillData(fibonacci(this.value));        worker.postMessage(this.value);    };    worker.onmessage = function(e) {        fillData(e.data, output);    }    </script></body></html>

上述使用Worker加载retFibonacciResult.js文件(下面会展示), 在数值框内容改变的时候, 将值发送出去, 然后将retFibonacciResult.js返回的内容填充到输出区域. 现在是retFibonacciResult.js的内容:

importScripts('fibonacci.js');onmessage = function(e) {    var d = e.data;    // console.log(d, typeof d)    // 这里传递过来的是字符串    postMessage(fibonacci(+d));}

retFibonacciResult.js很简单, 就是将fibonacci函数计算的内容返回到主页面, 其中通过importScripts引入了fibonacci.js文件,感觉这个就像Java中的import语法一样, 便于封装.

下面是fibonacci.js的内容:

function fibonacci(n) {    n = ~~n;    // ~~运算会将字符串, 函数, 对象也变成0, -_-|||    // if (Number.isNaN(n)) {    //    throw new TypeError('input must be a integer!');    // }    if (n < 0) {        return 0;    }    // 0, 1, 1    if (n < 2) {        return n;    }    return fibonacci(n - 1) + fibonacci(n - 2);}

这里写成递归的形式只是为了测试在输入比较大的数字时, 浏览器的表现.
通过测试发现, 在快速调整数值框的值的时候, 在使用Worker时,在数字变大时(我的机器是到35)响应结果会变慢, 但是浏览器界面并没有卡顿; 不使用Worker时, 同样的数值, 浏览器卡顿. 这就说明了Worker有类似多线程的作用, 对一些比较大的数据量可以考虑使用Worker来处理.
未完待续…

0 0