同步，异步，event loop，宏任务 与 微任务

1. js 代码的执行机制

• js是单线程的。
• js的异步是基于回调函数 callback 来实现的。

2. 同步任务与异步任务

同步任务：在主线程上，前一个任务执行结束，后一个任务开始。

异步任务：不在主线程上，等主线程上的任务结束之后，再进入主线程执行的任务。

2-1. 同步任务

console.log(1);
console.log(2);
console.log(3);
for (let i = 0; i <2000; i++) {
    console.log('循环中');
}
console.log(4);
console.log(5);

2-2. 异步任务

异步任务有哪些：

​ 常见: setTimeout，setInterval，Promise，Ajax，async functionn等。

console.log(1);
console.log(2);
console.log(3);
setTimeout(()=>{
    console.log("异步任务");
})
for (let i = 0; i <2000; i++) {
    console.log('循环中');
}
console.log(4);
console.log(5);

2-3. 图示

3. event loop

console.log(1);
console.log(2);
setTimeout(()=>{
    console.log(3);
})
console.log(4);

4. 宏任务 与 微任务

4-1. js 中有哪些任务？看图

• 微任务（microTask）：Promise，async/await等。

• 宏任务（macroTask）：setTimeout，setInterval，DOM事件，AJAX请求等。

• 结论：微任务执行的时机比宏任务早。执行顺序：微任务 -> DOM渲染 -> 宏任务

4-2. 包含宏任务与微任务的事件轮询

console.log(1);
console.log(2);
setTimeout(()=>{
    console.log(3);
})
Promise.resolve().then(()=>{
    console.log(4);
})
console.log(5);

// 输出结果： 自己运行思考 哈哈

有朋友会好奇，为啥宏任务是一个队列，微任务是一个队列，因为宏任务是浏览器规定的，微任务是ES6 规定的。

测试微任务与dom渲染的

const divEle=document.querySelector("#box")
const h2Ele='<h2>标题</h2>'
divEle.innerHTML+=h2Ele
divEle.innerHTML+=h2Ele
divEle.innerHTML+=h2Ele

// 这行代码表明dom解构已经渲染了，但是页面上还看不到，表明还没有渲染到页面上。
console.log("孩子节点的个数：",divEle.children.length); 

console.log(1);
console.log(2);
setTimeout(()=>{
    console.log(3);
})
Promise.resolve().then(()=>{
    console.log(4);
    alert("微任务") 
})
console.log(5);