时间切片

一、核心思想:如果任务不能在50毫秒内执行完,那么为了不阻塞主线程,这个任务应该让出主线程的控制权,使浏览器可以处理其他任务

二、目的:不阻塞主线程,而实现目的的技术手段是将一个长任务拆分成很多个不超过50ms的小任务分散在宏任务队列中执行(避免拆分的过于零碎,效率反而不高)

三、缺点:任务运行的总时间变长了。因为它每处理完一个小任务后,主线程会空闲出来,并且在下一个小任务开始处理之前有一小段延迟

四、使用。

   1)使用定时器实现:

              btn.onclick = function(){

                     someThing();            //50ms

                     setTimeOut({      

                             otherThing()       //50ms

                     });

                 };

     2) 利用Generator特性实现:



               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);

                      };

                };

             优化ts:避免任务粒度太小
              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);

                      };

                };
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容