javascript引擎长时间独占线程造成卡顿的解决方案

2025-05-29 0 66

Javascript 引擎的单线程特性使得在处理一个较大的循环遍历时会长时间独占线程,导致其它事件(例如用户操作)无法及时响应,严重时造成卡顿甚至是假死现象。为解决上述问题,一种可行机制是将大的循环拆分成若干小的循环片段分片执行,使得Javascript 引擎有时机在各段之间插入执行其它事情,从而有效改善性能体验

Ansync.js

复制代码 代码如下:


function Ansync (totalCount, segmentCount, workCallback, returnCallback)
{
var num_of_item_for_each_segment = segmentCount;
var num_of_segment = Math.ceil(totalCount / num_of_item_for_each_segment);
var count_of_segment = 0;
var timer;
var start, end;
this.process = function(scope, timeout)
{
if (scope != undefined)
{
workCallback = workCallback.bind(scope);
returnCallback = returnCallback ? returnCallback.bind(scope) : undefined;
}
if (count_of_segment == num_of_segment)
{
clearTimeout(timer);
if (returnCallback != undefined)
returnCallback();
}
else
{
start = count_of_segment * num_of_item_for_each_segment;
end = Math.min(totalCount, (count_of_segment + 1) * num_of_item_for_each_segment);
if (num_of_segment == 1)//needn't create timer
{
workCallback(start, end);
count_of_segment = 1;
this.process();
}
else
{
timer = setTimeout(function ansyncTimeout(){
if (workCallback(start, end)) //finish process if function returns true
{
count_of_segment = num_of_segment;
}
else
{
count_of_segment++;
}
this.scope.process();
}.bind({scope: this}),timeout == undefined ? Ansync.TimeOut : timeout);
}
}
}
}
Ansync.TimeOut = 5;

方法很简单,但是很实用,有相同项目需求的小伙伴参考下吧

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 javascript引擎长时间独占线程造成卡顿的解决方案 https://www.kuaiidc.com/110611.html

相关文章

发表评论
暂无评论