利用定时器处理用时过长的计算

参考于《javascript忍者秘籍》

了解定时器:

javascript运行时是单线程执行的,而定时器给予了代码跳出当前这种限制,在一定时间后异步执行的能力。

场景:

在业务中遇到了上万级的数据计算,而且计算过后需要有上千的DOM操作,从AJAX获取数据到渲染到页面上大概用时10S,速度慢到令人发指,且造成的浏览器阻塞直接会导致websocket连接中断。

模拟场景:

1
2
3
4
5
for (var i = 0;i < 100000; i++) {
var div = document.createElement('div');
div.innerHTML = '<div>' + i + '</div>';
document.documentElement.appendChild(div);
}

在模拟场景中,页面在chrome63版本中需要6s左右的时间才能渲染完毕(实际时间可能根据电脑不同有差异)。
附图:
定时器分解前

分解任务:

1
2
3
4
5
6
7
8
9
10
11
var i    = 0,       //提取循环中的i到这里
boot = 2000; //一次计算中的最大计算次数
(function xunhuan() {
for (;i < 100000 && i < boot;i++) {
var div = document.createElement('div');
div.innerHTML = '<div>' + i + '</div>';
document.documentElement.appendChild(div);
}
boot += 2000;
if (i < 100000) setTimeout(xunhuan, 0);
})();

任务分解后,虽然总的计算时长不会变短,但是有效的避免了浏览器阻塞,且用户看到数据需要等待的渲染时间就减少到了300+ms了(一次boot所需的渲染时长),极大的提升了用户体验。
附图:
定时器分解后

总结:

在以后的业务中,再遇到大量数据计算或DOM操作时,就可以利用定时器分解任务,将一次大的计算分解成若干个小的定时器计算,避免浏览器阻塞,提升用户体验。

坚持原创技术分享,您的支持将鼓励我继续创作!