时间切片

一、核心思想：如果任务不能在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);

                      };

                };