webWorker学习

webWorker学习

简单理解worker的作用就是一个处理复杂大量数据的js函数，
如下图，在index.html代码中，1、先对Worker进行实例化创建work，创建work.onmessage对事件监听，通过work.postMessage方法传递参数param，work.js创建message事件监听，通过message监听事件获得参数param，在work.js进行数据处理，完成后，通过postMessage方法传递结果数据，index.js的通过onmessage事件监听获得返回的数据。

注：worker要通过服务器才能进行使用

代码

index.html



    
    计算
    结果

work.js
addEventListener('message', function (event) {
    var num = event.data;
    var result = 0;
    for (var i = 1; i <= num; i++) {
        result += i;
    }
    postMessage(result);
}, false);
// 下面这写法也可以
onmessage = function (event) {
    var num = event.data;
    var result = 0;
    for (var i = 1; i <= num; i++) {
        result += i;
    }
    postMessage(result);
}

参考文档：
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
https://github.com/GoogleChromeLabs/ui-element-samples/blob/gh-pages/web-workers/worker.js