为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第24天 前端面试技能拼图3

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

2022.11.16 23:22 59浏览

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

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

​​​​

https://img2.sycdn.imooc.com/63750438000191e225271366.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消