课程名称：2周刷完100道前端优质面试真题
课程章节：第5章 前端面试技能拼图3 ：知识深度 - 原理和源码
主讲老师：双越
课程内容：
今天学习的内容包括：
5-9 -浏览器和nodejs事件循环（Event Loop）有什么区别-浏览器——浏览器中除常规任务外还有微任务和宏任务，宏任务先执行，微任务后执行。
课程收获：
单线程和异步
- JS 是单线程的（无论在浏览器还是nodejs）
- 浏览器中 JS 执行和 DOM 渲染共用一个线程
- 异步
宏任务和微任务
- 宏任务，如 setTimeout setInterval 网络请求
- 微任务，如 promise async/await，Mutaionobserver也是一个微任务，不常用
- 微任务在下一轮 DOM 渲染之前执行，宏任务在之后执行，微任务要比宏任务要快
console.log("start")
setTimeout(()=> {
console.log("timeout")
})
Promise.resolve().then(()=>{
console.log("promise then")
})
console.log("end")
start
end
promise then
undefined
timeout
const p = document.createElement('p')
p.innerHTML = 'new paragraph'
document.body.appendChild(p)
const list = document.getElementsByTagName('p')
console.log('length----', list.length)
console.log('start')
// 渲染之后
setTimeout(() => {
const list = document.getElementsByTagName('p')
console.log('length on timeout----', list.length) // 2
alert('阻塞 timeout')
})
// 渲染之前
Promise.resolve().then(() => {
const list = document.getElementsByTagName('p')
console.log('length on promise.then----', list.length) // 2
alert('阻塞 promise')
})
console.log('end')
今天的 学习了 浏览器和nodejs事件循环（Event Loop）有什么区别-浏览器，很早之前就知道宏任务和微任务，也稍微知道一点执行之类的，不过通过今天的学习，深刻的理解到了浏览器在执行过程中，会先执行常规任务，当遇到异步请求，定时等会把相关任务放入栈中，然后先执行宏任务的栈，在执行微任务的栈。对应的也是宏任务在下这一次DOM渲染之前执行，微任务在DOM渲染之后执行。
下一步就是 学习了 浏览器和nodejs事件循环（Event Loop）有什么区别-nodejs。今天学习就先到这里吧。
坚持打卡，坚持学习，未来可期，加油😀~