美文网首页
前端性能优化之TaskQueue任务队列/分步执行工具

前端性能优化之TaskQueue任务队列/分步执行工具

作者: Heaven2049 | 来源:发表于2017-02-13 14:34 被阅读0次

本工具用于拆分工作量较大的任务(如一个很大的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。

相关文章

网友评论

      本文标题:前端性能优化之TaskQueue任务队列/分步执行工具

      本文链接:https://www.haomeiwen.com/subject/tbzzittx.html