javascript引擎长时间独占线程造成卡顿的解决方案
更新时间:2014年12月03日 15:44:32 投稿:hebedich
这篇文章主要介绍了javascript引擎长时间独占线程造成卡顿的解决方案,需要的朋友可以参考下
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;
方法很简单,但是很实用,有相同项目需求的小伙伴参考下吧
您可能感兴趣的文章:
- jsp搜索引擎
- javascript 多种搜索引擎集成的页面实现代码
- 为JavaScript提供睡眠功能(sleep) 自编译JS引擎
- silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
- javascript模版引擎-tmpl的bug修复与性能优化分析
- js动画(animate)简单引擎代码示例
- 浏览器的JavaScript引擎的识别方法
- javascript轻量级模板引擎juicer使用指南
- Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数
- 基于jQuery的JavaScript模版引擎JsRender使用指南
- 教你使用javascript简单写一个页面模板引擎
- js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
- 黑帽seo劫持程序,js劫持搜索引擎代码
- 写给小白的JavaScript引擎指南
相关文章
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
这篇文章主要介绍了BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)的相关资料,需要的朋友可以参考下2017-01-01JavaScript onclick点击事件-点击切换图片且自动播放
这篇文章主要介绍了JavaScript onclick点击事件-点击切换图片且自动播放,在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片,下面来看看具体的实现过程吧2022-01-01基于 Bootstrap Datetimepicker 联动
这篇文章主要介绍了基于bootstrap datetimepicker 联动效果,需要的朋友可以参考下2017-08-08
最新评论