前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 1 自检100题
  • 2 面试综合汇总
  • 3 Promise面试题
    • 1 Promise的几道基础题
      • 1.1 题目一
      • 1.2 题目二
      • 1.3 题目三
      • 1.4 题目四
      • 1.5 题目五
      • 1.6 题目六
    • 2. Promise结合setTimeout
      • 2.1 题目一
      • 2.2 题目二
      • 2.3 题目三
      • 2.4 题目三
      • 2.5 题目四
      • 2.6 题目五
    • 3. Promise中的then、catch、finally
      • 3.1 题目一
      • 3.2 题目二
      • 3.3 题目三
      • 3.4 题目四
      • 3.5 题目五
      • 3.6 题目六
      • 3.7 题目七
      • 3.8 题目八
      • 3.9 题目九
      • 3.10 题目十
    • 4. Promise中的all和race
      • 4.1 题目一
      • 4.2 题目二
      • 4.3 题目三
      • 4.4 题目四
    • 5. async/await的几道题
      • 5.1 题目一
      • 5.2 题目二
      • 5.3 题目三
      • 5.4 题目四
      • 5.5 题目五
      • 5.6 题目六
      • 5.7 题目七
      • 5.8 题目八
      • 5.9 题目九
    • 6. async处理错误
      • 6.1 题目一
      • 6.2 题目二
    • 7. 综合题
      • 7.1 题目一
      • 7.2 题目二
      • 7.3 题目三
    • 8. 几道大厂的面试题
      • 8.1 使用Promise实现每隔1秒输出1,2,3
      • 8.2 使用Promise实现红绿灯交替重复亮
      • 8.3 实现mergePromise函数
      • 8.4 封装一个异步加载图片的方法
      • 8.5 限制异步操作的并发个数并尽可能快的完成全部
完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

event loop它的执行顺序:

  • 一开始整个脚本作为一个宏任务执行
  • 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
  • 当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完
  • 执行浏览器UI线程的渲染工作
  • 检查是否有Web Worker任务,有则执行
  • 执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空

微任务包括:MutationObserver、Promise.then()或reject()、Promise为基础开发的其它技术,比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。

宏任务包括:script、script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering

# 1 Promise的几道基础题

# 1.1 题目一

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
})
console.log('1', promise1);
@前端进阶之旅: 代码已经复制到剪贴板
  • 从上至下,先遇到new Promise,执行该构造函数中的代码promise1
  • 然后执行同步代码1,此时promise1没有被resolve或者reject,因此状态还是pending
'promise1'
'1' Promise{<pending>}
@前端进阶之旅: 代码已经复制到剪贴板

# 1.2 题目二

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);
@前端进阶之旅: 代码已经复制到剪贴板
  • 从上至下,先遇到new Promise,执行其中的同步代码1
  • 再遇到resolve(‘success’), 将promise的状态改为了resolved并且将值保存下来
  • 继续执行同步代码2
  • 跳出promise,往下执行,碰到promise.then这个微任务,将其加入微任务队列
  • 执行同步代码4
  • 本轮宏任务全部执行完毕,检查微任务队列,发现promise.then这个微任务且状态为resolved,执行它。
1 2 4 3
@前端进阶之旅: 代码已经复制到剪贴板
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 1 自检100题
  • 2 面试综合汇总
  • 3 Promise面试题
    • 1 Promise的几道基础题
      • 1.1 题目一
      • 1.2 题目二
      • 1.3 题目三
      • 1.4 题目四
      • 1.5 题目五
      • 1.6 题目六
    • 2. Promise结合setTimeout
      • 2.1 题目一
      • 2.2 题目二
      • 2.3 题目三
      • 2.4 题目三
      • 2.5 题目四
      • 2.6 题目五
    • 3. Promise中的then、catch、finally
      • 3.1 题目一
      • 3.2 题目二
      • 3.3 题目三
      • 3.4 题目四
      • 3.5 题目五
      • 3.6 题目六
      • 3.7 题目七
      • 3.8 题目八
      • 3.9 题目九
      • 3.10 题目十
    • 4. Promise中的all和race
      • 4.1 题目一
      • 4.2 题目二
      • 4.3 题目三
      • 4.4 题目四
    • 5. async/await的几道题
      • 5.1 题目一
      • 5.2 题目二
      • 5.3 题目三
      • 5.4 题目四
      • 5.5 题目五
      • 5.6 题目六
      • 5.7 题目七
      • 5.8 题目八
      • 5.9 题目九
    • 6. async处理错误
      • 6.1 题目一
      • 6.2 题目二
    • 7. 综合题
      • 7.1 题目一
      • 7.2 题目二
      • 7.3 题目三
    • 8. 几道大厂的面试题
      • 8.1 使用Promise实现每隔1秒输出1,2,3
      • 8.2 使用Promise实现红绿灯交替重复亮
      • 8.3 实现mergePromise函数
      • 8.4 封装一个异步加载图片的方法
      • 8.5 限制异步操作的并发个数并尽可能快的完成全部