【金秋打卡】第24天 前端面试技能拼图3

课程名称：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。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​​​​

​
​