js执行顺序

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

首先我们要知道 由于js是单线程的脚本，异步事件要基于回调来实现的
而event loop 就是异步回调的实现原理

1，js的执行顺序

1. 从前到后，一行一行执行
2. 如果有一行执行报错，就会停止下面代码的执行
3. 先执行同步代码，后执行异步

举个例子

这上面是一个js执行顺序的小案例

上面是浏览器运行

首先运行第一行代码，显示console.log(‘Hi’)，然后清空调用栈。

然后调用函数，函数会进入异步函数队列中

最后执行log代码，然后清空

然后没有同步代码，就会启动event loop 机制，浏览器触发callback


这样执行完了

同步代码，一行一行放在call stack 中执行
遇到异步，会先“记录”下，等待时机（定时、网络请求等）
时机到了，就会移动到callback Queue 库里面
如call stack 为空（即同步代码执行完）event loop 开始工作
轮训查找 callback Queue，如果有就移动到 call stack执行
然后继续轮训查找（和永动机一样）

参考文档
深入理解Javascript之Callstack&EventLoop
浏览器运行机制详解

2，宏任务，微任务

js单线程–事件执行顺序，宏任务与微任务

由于vue react 框架的应用广泛，封装好了DOM操作，但是还是要熟悉的