Web Worker之HelloWorld

最新推荐文章于 2022-11-28 22:24:51 发布

gerrylon007

最新推荐文章于 2022-11-28 22:24:51 发布

阅读量393

点赞数

分类专栏： JavaScript 文章标签： Worker javascript

本文链接：https://blog.csdn.net/butterfly5211314/article/details/52108217

版权

JavaScript 专栏收录该内容

42 篇文章 2 订阅

订阅专栏

首先, 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来处理.
未完待续…