時(shí)間切片

一沟使、核心思想:如果任務(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);

                      };

                };
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寿烟,一起剝皮案震驚了整個(gè)濱河市澈驼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌韧衣,老刑警劉巖盅藻,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異畅铭,居然都是意外死亡氏淑,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進(jìn)店門硕噩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來假残,“玉大人,你說我怎么就攤上這事』岳粒” “怎么了阳惹?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長眶俩。 經(jīng)常有香客問我莹汤,道長,這世上最難降的妖魔是什么颠印? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任纲岭,我火速辦了婚禮,結(jié)果婚禮上线罕,老公的妹妹穿的比我還像新娘止潮。我一直安慰自己,他們只是感情好钞楼,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布喇闸。 她就那樣靜靜地躺著,像睡著了一般询件。 火紅的嫁衣襯著肌膚如雪燃乍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天宛琅,我揣著相機(jī)與錄音橘沥,去河邊找鬼。 笑死夯秃,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的痢艺。 我是一名探鬼主播仓洼,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼堤舒!你這毒婦竟也來了色建?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤舌缤,失蹤者是張志新(化名)和其女友劉穎箕戳,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體国撵,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡陵吸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了介牙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片壮虫。...
    茶點(diǎn)故事閱讀 38,100評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出囚似,到底是詐尸還是另有隱情剩拢,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布饶唤,位于F島的核電站徐伐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏募狂。R本人自食惡果不足惜办素,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望熬尺。 院中可真熱鬧摸屠,春花似錦、人聲如沸粱哼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽揭措。三九已至胯舷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間绊含,已是汗流浹背桑嘶。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留躬充,地道東北人逃顶。 一個(gè)月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像充甚,于是被迫代替她去往敵國和親以政。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內(nèi)容