前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务

1.Promise.then() .catch() .finally()

2. MutationObserver

3. Object.observe

无渲染

// 宏任务

console.log(‘1’)

// setTimeout 的回调是 宏任务，进入回调队列排队

setTimeout(() => {

// 宏任务

console.log(‘4’)

// setTimeout 的回调是 宏任务2，进入回调队列排队

setTimeout(() => {

console.log(‘7’)

}, 0)

// Promise 的回调是 微任务，本轮调用末尾直接执行

Promise.resolve()

.then(() => {

console.log(‘6’)

})

console.log(‘5’)

}, 0)

// Promise 的回调是 微任务，本轮调用末尾直接执行

Promise.resolve()

.then(() => {

console.log(‘3’)

})

console.log(‘2’)

以上代码执行循序为1~7正序输出。

每一个宏任务，后面都可以跟一个微任务队列，如果微任务队列中有指令或方法，那么就会执行；如果没有，则开始执行下一个宏任务，直到所有的宏任务执行完为止，微任务相当于宏任务的小尾巴

所以，这并没有违背回调队列的先进先出原则，一个宏任务中如果伴随着微任务，那么就先执行微任务，宏任务先放置，等到后面的微任务一个个都执行完后，再开始执行宏任务！

---

其实浏览器执行Js代码的完整顺序应该是：同步任务 ——> 异步微任务 ——> DOM渲染页面 ——>异步宏任务

没错，在微任务与宏任务之间，浏览器会进行一次DOM渲染，如下案例：

有渲染

//向body添加h1节点，内容为Hello

const $content = $(‘

Hello

’)

${(}^{\prime }bod{y}^{\prime }).append($content)

console.log(1);

Promise.resolve().then(() => {

console.log(‘2.promise’);

alert(‘promise then’)

})

setTimeout(() => {

console.log(‘3 setTimeout’);

alert(‘setTimeout’)

}, 0);

console.log(4);

执行过程：

step1：

点击aler窗口确定后，step2：

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

图片转存中…(img-JGku3pRl-1714184118799)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-eq6fhIwK-1714184118800)]