一沟使、核心思想:如果任務(wù)不能在50毫秒內(nèi)執(zhí)行完,那么為了不阻塞主線程映皆,這個(gè)任務(wù)應(yīng)該讓出主線程的控制權(quán),使瀏覽器可以處理其他任務(wù)
二轰枝、目的:不阻塞主線程捅彻,而實(shí)現(xiàn)目的的技術(shù)手段是將一個(gè)長任務(wù)拆分成很多個(gè)不超過50ms的小任務(wù)分散在宏任務(wù)隊(duì)列中執(zhí)行(避免拆分的過于零碎,效率反而不高)
三鞍陨、缺點(diǎn):任務(wù)運(yùn)行的總時(shí)間變長了步淹。因?yàn)樗刻幚硗暌粋€(gè)小任務(wù)后,主線程會(huì)空閑出來诚撵,并且在下一個(gè)小任務(wù)開始處理之前有一小段延遲
四缭裆、使用。
1)使用定時(shí)器實(shí)現(xiàn):
btn.onclick = function(){
someThing(); //50ms
setTimeOut({
otherThing() //50ms
});
};
2) 利用Generator特性實(shí)現(xiàn):
btn.onclick =ts( function* (){
someThing(); //50ms
yield;
otherThing(); //50ms
}) ;
function ts(gen){
if(typeof(gen) === 'function') gen = gen();
if(!gen || typeof gen.next !='function') return;
return function next(){
const res = gen.next();
if(res.done) return;
setTimeOut(next);
};
};
優(yōu)化ts:避免任務(wù)粒度太小
function ts(gen){
if(typeof(gen) === 'function') gen = gen();
if(!gen || typeof gen.next !='function') return;
return function next(){
let start = performance.now();
let res = null;
do{
res = gen.next();
}while(!res.done && performance.now-start<25)
if(res.done) return;
setTimeOut(next);
};
};