面试题 JS 异步 ---- 进阶

JS 异步 — 进阶

• 之前讲解 JS 异步，在于初阶的应用
• 本章在于 JS 异步的原理和进阶
• 对初学者有点难度，尽量深入浅出

思维导图

本章主要内容

• event loop
• promise 进阶
• async / await
• 微任务 / 宏任务

先看几个面试题

问答

请描述 event loop （事件循环 / 事件轮询）的机制，可画图

1
2

3
微任务是ES6语法规定的
宏任务是有浏览器灰顶的

4

什么是宏任务和微任务，两者有是区别？

1.宏任务（MacroTask）,微任务（MicroTask）
-1.两者都是异步
-2.同步和异步的区别：

（1）同步代码执行：你写的顺序是什么，他就按什么顺序执行，显而易见，同步任务是阻塞的，也就是说，只有前一句执行完成之后，才能进行下一句
（2）异步代码的执行：常见的异步就是callback，不是按照写的顺序执行的就是异步，但是异步并不等于非阻塞，callback被调用的时机也是通过执行到它才会被执行，也是一步步往下执行的，只不过不是按照写的程序从上到下的顺序而已，所以如果有些任务占用了整个线程，那么异步任务也会被阻塞，这也是由于JS都是单进程单线程的
（3）经典的JS都是单进程单线程的，单现代的JS已经突破了这一点，我们有方法新建额外地进程共同处理任务，NodeJS也可以在同一个进程中新建线程，浏览器也有要支持线程的计划
（4）异步除了回调，还有其他种类的，比如任务，任务是一种队列类型的，先注册的任务先被执行，任务里面，根据执行的时机分为宏任务和微任务，根据什么区分发执行时机，需要去看设计部分

-3.进程的切换肯定是宏任务，因为需要花费大量的资源
-4.线程的切换是微任务，因为只需要在同一个进程中切换就可以了
-5.更准确的说，很多微任务都是纤程的切换导致的，纤程是比线程更小的概念
-6.为什么和定时器有关的任务是宏任务？

（1）因为计时是实时的，它一定不能被阻塞，所以定时器被设计在另一个进程中被管理，所以，定时器任务会有进程的切换，所以只能是宏任务

-7.事件为什么是宏任务呢？

事件的触发是依赖于浏览器的实现，平台有它自己的事件注册和派发机制，比如nodeJS用的内核libuv,所以不管怎样，事件的独立注册表和派发机制导致，他也不会和JS存在一个进程中，事件的管理中心一定是在另外一个进程中实现的，那么去派发事件，也就是宏任务

-8.JS本身语法内的

（1）比如async/await,它本身是一个迭代器，迭代器利用了纤程，在不同的纤程之间切换，所以是微任务
（2）进程和纤（线）程最大的区别是：进程占用单独的资源，即不会共享CPU和内存，而线程往下，都是共享CPU和内存的，只是在一个空间中在进行拆分，做切换
（3）如果是JS本身的命令是进程的话，就没有办法拿到外面上下文的数据了，因为不共享内存
（4）JS本身的部分一定是比线程小的

-9.非JS本身的

非JS本身的，因为往往被设计成不被JS阻塞的，所以会单独开启一个进程作管理，这样出来的都是宏任务

-10.那么像Observer(如MutationObserver等)，和一些渲染为什么都是微任务呢？

（1）虽然它们和JS的本身无关，但是它们的执行时机和它们所在的进程是有关的
（2）比如MutationObserver，观察的是DOM,它的作用即是对DOM的变化做出响应，所以，他会在管理DOM的进程中
（3）渲染也是一样的，是在整个渲染流程中的某一步作的回调，并没有切换出它的本身所在的空间

-11.微任务在执行时，它能获取到任务外的上下文
-12.宏任务在执行时，他不能获取到任务外的上下文
-13.为什么定时器任务是宏任务？

（1）可以把定时器和定时器任务是分离的，先把定时器想成一个时间管理中心
（2）然后在上面注册一个个任务，这些任务本身和时间无关
（3）时间管理中心和时间有关的，当时间管理中心发现时间到了，要执行任务，就从任务列表中找出注册的任务，并通知JS执行任务
（4）所以可以看到，时间管理中心（定时器的进程）和执行的任务（JS运行时）是无关的，不共享上下文，所以是宏任务
（5）控制渲染的函数如requestAnimationFrame，这个函数本身是要求在下一帧重绘前做什么，它的本身被设计成是在渲染的流程中，然后它做的事情应该也是和渲染有关的，也就是这个任务和它所处的空间的上下文一致

-14.微任务和宏任务执行的顺序

（1）因为微任务不需要执行上下文（这里指的是资源的切换），所以它可以在一次上下文切换间隔中把所有的微任务都做掉
（2）而宏任务因为需要切换上下文，所以他会慢点执行
（3）所以会先执行已注册的微任务，然后是宏任务
（4）这样，就相当于做了一次上下文的切换，如果在此期间，又有新的微任务或宏任务被注册了，就不断重复上面的这个流程

Promise 有哪三种状态？ 如何变化？

Promise的三种状态
-pending - 进行中
-fulfilled - 成功
-rejected - 失败

Promise对象，可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数,但Promise对象的状态不受外界影响，Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

状态的改变（或者说决议）不可逆，一旦决议就不能再更改。

任何时候都可以得到这个结果，Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected，只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型），如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果，这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

开始讲解知识点

event loop （事件循环 / 事件轮询）

• JS 是单线程运行的
• 异步呀基于回调来实现
• event loop 就是异步回调的实现原理

JS 如何执行

• 从前到后，一行一行执行
• 如果某一行执行报错，则停止下面代码的执行
• 先把同步代码执行完
  

开始讲解 event loop 过程

• 初学者可能会感觉难，尽量深入浅出
• 第一遍讲解是，感觉不懂得不要停下，会重复讲三遍
• 不要抠细节，不要扩大范围。核心是 event loop 的过程
  先看下图
  
  
  
  
  

在这里插入图片描述

总结 event loop 过程

• 同步代码，一行一行放在 Call Stack 执行
• 遇到异步，辉县“记录”下，等待时机（定时，网络请求等）
• 时机到了，就移动到 Callback Queue
• 如果 Call Stack 为空（即同步代码执行完）Event Loop
• 轮询查找 Callback Queue ，如有则移动到 Call Stack 执行
• 然后继续轮询查找（永动机一样）
  
  
  

DOM 事件和 event loop

• JS是单线程的
• 异步（ setTimeout ， ajax 等）使用回调，基于 event loop
• DOM 事件也使用回调，基于 event loop

Promise

• 三种状态
• 状态的表现和变化
• then 和 catch 对状态的影响

 function loadImg(res){
   
        const p = new Promise(