javascript引擎长时间独占线程造成卡顿的解决方案
Javascript引擎的单线程特性使得在处理一个较大的循环遍历时会长时间独占线程,导致其它事件(例如用户操作)无法及时响应,严重时造成卡顿甚至是假死现象。为解决上述问题,一种可行机制是将大的循环拆分成若干小的循环片段分片执行,使得Javascript引擎有时机在各段之间插入执行其它事情,从而有效改善性能体验
Ansync.js
functionAnsync(totalCount,segmentCount,workCallback,returnCallback) { varnum_of_item_for_each_segment=segmentCount; varnum_of_segment=Math.ceil(totalCount/num_of_item_for_each_segment); varcount_of_segment=0; vartimer; varstart,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'tcreatetimer { workCallback(start,end); count_of_segment=1; this.process(); } else { timer=setTimeout(functionansyncTimeout(){ if(workCallback(start,end))//finishprocessiffunctionreturnstrue { count_of_segment=num_of_segment; } else { count_of_segment++; } this.scope.process(); }.bind({scope:this}),timeout==undefined?Ansync.TimeOut:timeout); } } } } Ansync.TimeOut=5;
方法很简单,但是很实用,有相同项目需求的小伙伴参考下吧