本工具用于拆分工作量较大的任务(如一个很大的for循环)为较小的任务分步运行管理,可明显优化掉帧问题。根据@李银城童鞋Effective前端6:避免页面卡顿及做游戏时优化掉帧问题有感而发。
GitHub:heaven2049/TaskQueue。
实现思路:使用队列管理任务列表,若当前任务为空/完成则从队列shift下一个任务,每帧将当前任务执行若干次,执行完为止。
以添加n(n>10000)个表情为例子,直接for循环添加浏览器表示压力很大😳😳😳。那么,将添加表情封装为方法addFace,使用TaskQueue方法如下。
varfaceNum=10000;varqueue=newTaskQueue();queue.addHandler(addFace,1);functionaddFace(index){//添加表情returnindex>faceNum;//返回值将用于判断任务是否完成}
addFace方法将在每帧中被调用,10000次自动结束。浏览器现在表示毫无压力😄😄😄。
例子:QueueTest
详细用法:
用法1:
简单情况下,只需传入执行函数func及每帧该函数执行次数repeatTimes,并以该函数返回值判断任务是否完成。
var queue = new TaskQueue();
queue.addHandler(func,repeatTimes,completeCallback);
用法2:
复杂情况下,实现任务分割类继承自Task,并重写Task.execute()方法。
var task = new MyTask();
var queue = new TaskQueue();
queue.addTask(task);
如有问题,请直接提issue。