【校招VIP】前端考点之js事件循环机制

考点介绍：
js事件循环机制是前端面试几乎必被问到的一个考点，涉及到的知识点比较多，需要对比理解和掌握。主要包括三部分：JavaScript本身是单线程，非阻塞的；浏览器的事件循环；node环境下的事件循环

本期分享的内容分为试题、文章以及视频三部分，答案详情解析和文章内容点击文章末尾链接即可查看！

一、考点题目

1、什么是事件循环？
解答：事件循环（eventLoop）是单线程的JavaScript在处理异步事件时进行的一种循环过程......

2、请描述事件循环Event Loop执行机制
解答：主线程任务——>微任务——>宏任务 如果宏任务里还有微任务就继续执行宏任务里的微任务，如果宏任务中的微任务中还有宏任务就在依次进行......

3、任务队列又分为宏任务与微任务，分别包括什么？
解答：浏览器的事件循环分为同步任务和异步任务；所有同步任务都在主线程上执行，形成一个函数调用栈（执行栈），而异步则先放到任务队列（task queue）里，任务队列又分为宏任务（macro-task）与微任务（micro-task）。下面的整个执行过程就是事件循环......

4、对js事件循环机制，以下代码输出是什么？

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

async function async1() {     console.log('async1 start');     await async2();     console.log('async1 end'); } async function async2() {     console.log('async2'); } console.log('script start'); setTimeout(function() {     console.log('setTimeout'); }, 0) async1(); new Promise(function(resolve) {     console.log('promise1');     resolve(); }).then(function() {     console.log('promise2'); }); console.log('script end');

解答：先执行宏任务（当前代码块也算是宏任务），然后执行当前宏任务产生的微任务，然后接着执行宏任务

1 从上往下执行代码，先执行同步代码，输出 script start

2 遇到setTimeout，现把 setTimeout 的代码放到宏任务队列中

3执行 async1()，输出 async1 start, 然后执行 async2(), 输出 async2，把 async2() 后面的代码 console.log('async1 end')放到微任务队列中

4 接着往下执行，输出 promise1，把 .then()放到微任务队列中；注意Promise本身是同步的立即执行函数，.then是异步执行函数

5 接着往下执行， 输出 script end。同步代码（同时也是宏任务）执行完成，接下来开始执行刚才放到微任务中的代码

6 依次执行微任务中的代码，依次输出 async1 end、 promise2, 微任务中的代码执行完成后，开始执行宏任务中的代码，输出 setTimeout

......

（点击文章末尾链接查看完整版内容）

二、考点文章

1、【校招VIP】带你了解事件循环机制(Event Loop)
事件循环分为两种,分别是浏览器事件循环和node.js事件循环,本文主要对浏览器事件循环进行描述。我们都知道JavaScript是一门单线程语言，指主线程只有一个。Event Loop事件循环，其实就是JS引擎管理事件执行的一个流程，具体由运行环境确定。目前JS的主要运行环境有两个，浏览器和Node.js......

2、【校招VIP】js事件循环机制及面试题详解
javascript是单线程执行的程序，也就是它只有一条主线，所有的程序都是逐行“排队”执行，在这种情况下可能存在一些问题，比如说setTimeout、ajax等待执行的时间较长，就会阻塞后续代码的执行，使得整个程序执行的耗时非常久，那么为了应对这样一个问题，javascript代码在执行的时候，是有几个“通道”的......

3、【校招VIP】高频面试题：JavaScript事件循环机制解析
最近面试了很多家公司，这道题几乎是必被问到的一道题。之前总觉得自己了解得差不多，但是当第一次被问到的时候，却不知道该从哪里开始说起，涉及到的知识点很多。于是花时间整理了一下。并不仅仅是因为面试遇到了，而是理解JavaScript事件循环机制会让我们平常遇到的疑惑也得到解答......

（点击文章末尾链接查看完整版内容）

三、考点视频

前端考点JavaScript事件循环机制要点概括
js事件循环机制是前端面试几乎必被问到的一个考点，涉及到的知识点比较多，需要对比理解和掌握......

点击下方链接查看题目及解析内容：
移动端链接：https://m.xiaozhao.vip/dTopic/detail/1282
PC端链接：https://xiaozhao.vip/dTopic/detail/1282