没有异步机制会怎样
js是单线程的，如果没有异步机制，所有代码会同步执行。一些比较耗时的操作比如网络请求，会阻塞线程直到请求返回结果才会继续向下执行。如果这样js的执行效率会比较低，甚至导致页面卡死。所以必须加入异步机制以提升js线程执行效率。
怎么加入异步机制
单线程和异步是互斥的，所以js线程本身是没有异步能力的。但是浏览器赋予了js线程异步能力，浏览器不仅支持js主线程，还可以开辟出http请求线程、定时器触发线程、事件触发线程等多种幕后线程。js线程遇到http请求、定时器等任务，会把它们交给相应的幕后线程执行，js线程继续向下执行，http请求、定时器等任务完成后再把回调放入js队列中等待js线程调用。这样js线程就具备了异步的能力了。同时JS引入了Promise使单线程也具备了异步能力。
怎么调度队列中的任务
浏览器把任务分为两类：宏任务和微任务。js引擎线程发起的任务称为微任务，浏览器其它线程发起的任务称为宏任务。整体代码script会放到宏任务里；幕后线程执行的任务完成后会把对应的回调放到宏任务里；js主线程会把某些任务放到微任务里，比如：Promise.resolve().then(callback) js主线程会把callback放到微任务里。
js线程的一般调度策略是：js线程从宏任务中选取一个任务执行，执行完成后，逐个执行微任务中的任务直至微任务为空，然后再次从宏任务中选取一个任务执行，如此反复。js线程从宏任务中选取一个任务开始到执行完所有微任务为止称为一个事件循环。比如宏任务中有两个任务macro1, macro2，微任务中有三个任务micro1, micro2, micro3，那么调度顺序为：macro1 > micro1 > micro2 > micro3 > macro2。
分析一个例子：
setTimeout(function timout_1() {
console.log("timout_1");
}, 0);
Promise.resolve().then(function then_1() {
console.log("then_1");
});
Promise.resolve().then(function then_2() {
console.log("then_2");
});
js线程执行前，宏任务里只有整体代码script，微任务里没有任务。按照一般调度策略：
- js线程首先从宏任务里选取整体代码script执行；
- 把setTimeout任务交给计时器线程，计时器线程会立刻往宏任务里加入一个tiemtimeou_1任务 ；
- js线程把then_1加入微任务；
- js线程把then_2加入微任务 ；
- 执行完宏任务里的整体代码script，接着要依此执行微任务里的任务，现在微任务里有then_1和then_2，js线程从微任务里选取then_1执行,控制台打印then_1；
- js线程从微任务里选取then_2执行,控制台打印then_2；
- 微任务里没有其它任务，所以第一次事件循环结束；
- js线程开启第二次事件循环，从宏任务中选取任务执行。此时宏任务里只有timeou_1任务，js线程选取timeou_1执行，控制台打印timeou_1；
- 执行完timeou_1，接着要依此执行微任务里的任务，现在微任务里没有任务，所以第二次事件循环结束；
- 此时宏任务、微任务都为空，js线程循环等待新任务。
事件回调任务优先级较高
宏任务中，任务一般会按照先进先出的原则进行调度，但是如果宏任务中同时存在事件触发线程触发的任务，则会优先调度该任务。
分析一个例子：
<!DOCTYPE html>
<html lang="en">
<body>
<button id="btn">button</button>
<script>
document.getElementById("btn").onclick = function handleClick() {
console.log("click btn");
};
setTimeout(function timeoutFn() {
console.log("timeoutFn");
}, 0);
document.getElementById("btn").click();
</script>
</body>
</html>
- js线程执行整体代码script；
- 为btn添加监听事件；
- 时间触发线程将timeoutFn加入宏任务；
- 触发点击btn事件，将handleClick加入宏任务;
- 执行完整体代码script，因为微任务为空，本次事件循环结束；
- 第二次事件循环，宏任务中同时存在时间触发线程回调timeoutFn和事件触发线程回调handleClick，虽然timeoutFn先进入宏队列但事件回调任务优先级高，优先调度handleClick，输出click btn。微任务中没有任务本次事件循环结束；
- 第三次事件循环，宏任务中只有timeoutFn，js线程选取 timeoutFn 执行，输出 timeoutFn。微任务中没有任务本次事件循环结束；
- 此时宏任务、微任务都为空，js线程循环等待新任务。
