利用new Worker处理js卡死问题

在日常写代码时，我们会经常遇到过，js文件或html页面内的  js 逻辑太过复杂，并且处理的数据太过庞大，页面经常会出现loading时间过长或直接卡死，大大的降低用户的体验效果

PS：（看书上说如果页面上有一直在执行的代码，当页面放置很久后，也会卡死，当然，用这种方法也可以得到解决，只不过还没试）

worker是一个能处理js长期运行,页面卡死的一个很好函数

首先看代码

var numberList = 1000000000;


var num = 0;

for (var i = 0; i < numberList; i++) {
    num += i;
}

console.log(num);

在计算出num的结果之前，页面是不能操作的，很影响用户体验；

用了 new Worker 之后

html页面的 代码

var numberList = 1000000000;

var worker = new Worker('./test.js');



    worker.postMessage(numberList);
    worker.onmessage = function(event){
        console.log(event.data);
    };


    worker.onerror = function (event) {
        console.error(event.filename + ':' + event.message);
        //如果发生错误,立即终止代码
        worker.terminate();
    }

test.js的代码

self.onmessage = function (event) {
    var data = event.data;


    var num = 0;

    for (var i = 0; i < data; i++) {
        num += i;
    }


    self.postMessage(num);
}

这样改写js之后，页面会正常展示在用户面前，不会被卡死，提高了用户的体验。

 

如果对你有帮助的话就点个赞吧。。。