一. js运行机制
js是单线程，但是存在同步【阻塞】和异步【非阻塞】执行模式
- 同步：从上到下、从左到右的⽅式执⾏代码逻辑
- 异步：和同步对⽴，所以异步模式的代码是不会按照默认顺序执⾏的。在解释时，如果遇到异步模式的代码，引擎会将当前的任务“挂起”并略过
浏览器的线程组成
1. GUI渲染线程
2. JavaScript引擎线程
3. 事件触发线程
4. 定时器触发线程
5. http请求线程
6. 其他线程
在JavaScript代码运⾏的过程中实际执⾏程序时同时只存在⼀个活动线程，这⾥实现同步异步就是靠 多线程切换的形式来进⾏实现的。
所以我们通常分析时，将上⾯的细分线程归纳为下列两条线程：
- 【主线程】：这个线程⽤了执⾏⻚⾯的渲染，JavaScript代码的运⾏，事件的触发等等
- 【⼯作线程】：这个线程是在幕后⼯作的，⽤来处理异步任务的执⾏来实现⾮阻塞的运⾏模式
二. 事件循环机制
-
宏任务：
宏任务是JavaScript中最原始的异步任务，包括setTimeout、setInterVal、AJAX等，在代码执⾏环境中按照同步代码的顺序，逐个进⼊⼯作线程挂起，再按照异步任务到达的时间节点，逐个进⼊异步任务队列，最终按照队列中的顺序进⼊函数执⾏栈进⾏执⾏。
1 `script` 2 setTimeout 3 setInterval 4 setImmediate（node） 5 I/O 网络请求完成、文件读写完成事件 6 UI rendering 7 requestAnimationFrame（浏览器） 8 用户交互事件（比如鼠标点击、滚动页面、放大缩小等） -
微任务：
微任务是随着ECMA标准升级提出的新的异步任务，微任务在异步任务队列的基础上增加了【微任务】的概念，每 ⼀个宏任务执⾏前，程序会先检测中是否有当次事件循环未执⾏的微任务，优先清空本次的微任务后，再执⾏下⼀ 个宏任务，每⼀个宏任务内部可注册当次任务的微任务队列，再下⼀个宏任务执⾏前运⾏，微任务也是按照进⼊队列的顺序执⾏的。
1. process.nextTick（node） 2. MutationObserver（浏览器） 3. promise.then/.catch/.finally【注】：new promise中的function是同步的，promise的.then.catch.finally中的内容才是异步的
-
图解
主线程代码在运⾏时，会按照同步和异步代码将其分成两个去处：如果是同步代码执⾏，就会直接将该任务放在⼀个叫做【函数执⾏栈】的空间进⾏执⾏，执⾏栈是典型的【栈结构】（先进后出），程序在运⾏的时候会将同步代码按顺序⼊栈。将异步代码放到【⼯作线程】中暂时挂起，【⼯作线程】中保存的是定时任务函数、JS的交互事件、JS的⽹络请求等耗时操作。
当【主线程】将代码块筛选完毕后，进⼊执⾏栈的函数会按照从外到内的顺序依次执行，运⾏中涉及到的对象数据是在堆内存中进⾏保存和管理的。当执⾏栈内的任务全部执⾏完毕 后，执⾏栈就会清空。
执⾏栈清空后，“事件循环”就会⼯作，“事件循环”会检测本次循环中是否还有微任务执行，若有的话，将所有微任务插入到任务队列后执行清空所有微任务。
微任务清空后，⼯作线程会把到期的定时任务、返回数据的http 任务等【异步任务】按照先后顺序插⼊到【任务队列】中，等待执⾏栈清空，再检测本次的宏任务中注册的所有微任务进行执行清空。
- 所以正确的一次 Event loop 顺序是这样的
- 执行同步代码，这属于宏任务
- 执行栈为空，查询本次是否有微任务需要执行
- 执行所有微任务
- 必要的话渲染 UI
- 然后开始下一轮
Event loop，执行宏任务-微任务的循环
- 关于执行栈
先进后出，后进先出。无限制的递归会导致执行栈溢出，eg:
var i = 0;
function task(){
i++
console.log(`递归了${i}次`)
task()
}
task()
跨越递归限制：
var i = 0;
function task(){
i++
console.log(`递归了${i}次`)
//使⽤异步任务来阻⽌递归的溢出
setTimeout(function(){
task()
},0)
}
task()
使用异步任务进行调用，会先把异步内容挂起，等待执行栈清空再进行异步内容的入栈执行和出栈，依次无限循环
- 特殊任务
关于requestAnimationFrame函数的执⾏频率是每秒钟60次左右，是根据浏览器相关的，所以和其他timer类的宏任务的执行时机不确定，可能在之前可能在之后。
setTimeout(function() {console.log('timer1')}, 0)
requestAnimationFrame(function(){
console.log('UI update')
})
setTimeout(function() {console.log('timer2')}, 0)
new Promise(function executor(resolve) {
console.log('promise1')
resolve()
console.log('promise2')
}).then(function() {
console.log('promise.then')
})
console.log('end')
// 结果：
// promise1 promise2 end promise.then (UI update) timer1 timer2 (UI update)
关于事件
document.addEventListener('click', function(){
Promise.resolve().then(()=> console.log(1));
console.log(2);
})
document.addEventListener('click', function(){
Promise.resolve().then(()=> console.log(3));
console.log(4);
})
// 2 1 4 3
解析：当元素被点击时，两个事件会按照先后的注册顺序放⼊异步任务队列中进⾏执⾏，所以事件1和事件2 会按照代码编写的顺序触发。由于事件执⾏时并不会阻断JS默认代码的运⾏，所以事件任务也是异步任务，并且是宏 任务，所以两个事件相当于按顺序执⾏的两个宏任务
即顺序：同步代码（挂起click事件异步代码）-> 点击触发 -> 执行第一个异步代码宏任务(其中先执行同步代码2再微任务1) -> 执行第二个异步代码宏任务(其中先执行同步代码4再微任务3)
