前端面试高频考点—事件循环Event loop

目录

事件循环

执行步骤

概念讲解

主线程

[微任务(micro task)](#微任务(micro task))

[宏任务(macro task)](#宏任务(macro task))

[Event Loop经典例题](#Event Loop经典例题)

这段代码的执行结果是什么?

正确答案:

具体流程:


事件循环

主线程从"任务队列"中读取执行事件,这个过程是循环不断的,这个机制被称为事件循环。

++(JS的运行机制就是事件循环!)++

执行步骤

主线程任务------>微任务------>宏任务 如果宏任务里还有微任就继续执行宏任务里的微任务,如果宏任务中的微任务中还有宏任务就在依次进行

同步的任务没有优先级之分,异步执行有优先级,先执行微任务( microtask 队列),再执行宏任务( macro task 队列),同级别按顺序(先微任务后宏任务)

概念讲解

主线程

所有的同步任务都是在主线程里执行的,异步任务可能会在macrotask或者microtask里面

微任务(micro task)

  • promise
  • async
  • await
  • process.nextTick(node)
  • mutationObserver(html5新特性)

宏任务(macro task)

  • script(整体代码)
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI render

Event Loop经典例题

这段代码的执行结果是什么?

javascript 复制代码
console.log('1')

setTimeout(function callback(){
	console.log('2')
}, 1000)

new Promise((resolve, reject) => {
    console.log('3')
    resolve()
})
.then(res => {
    console.log('4');
})

console.log('5')

正确答案:

1,3,5,2,4

具体流程:

参考文章:

一看就懂的事件循环机制(event loop) - 掘金 (juejin.cn)

到底什么是Event Loop?那就来了解一下JavaScript分别在浏览器和Node环境下的运行机制吧-CSDN博客

相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc2 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter