知食记
  • 知食记
  • 思维导图
  • 归档
  • 博客
    • 理解 CAP 理论,以开一家餐厅为例
    • TypeScript tsconfig.json 整理
    • this 陷阱与原理
    • 时间戳与时区
    • vue-cli 项目添加 tailwind.css
    • 实现 JavaScript 数组的逆序索引
    • 工程师段位记
    • Jest 内部原理剖析
    • 如何成为技术高手
    • Vue lifecycle hook little trick
    • 利用 Cloudflare Worker 定制 Gitbook
    • 如何解除端口占用?
  • 🎃CSS
    • CSS基础
      • 盒模型
      • 清除浮动
      • html5的语义化标签
      • 水平居中
      • 垂直局中
      • 水平垂直居中
      • Sticky Footer
      • 三栏布局
      • 文本截断省略号
      • 伪类与伪元素
      • 定位
      • BEM
      • 主题切换
      • 权重
      • px, em, rem
      • flex 布局
    • CSS3
      • calc
    • SCSS
      • lighten
  • 🎉JavaScript
    • JS 概念
      • 类型
      • 类型转换
      • 内存
      • 原型链
      • 继承
        • 类式继承+原型继承
        • 构造函数继承
        • 组合式继承
        • 寄生继承
        • 寄生组合
      • 词法作用域
      • 事件委托
      • Falsy
      • This
      • 闭包
      • Event-loop
      • 跨域
      • function.length
      • arguments
      • !!
      • void 0
      • 柯里化1
      • 柯里化2
      • 异常
      • 协程
    • JS陷阱
      • 相等
      • 连等赋值
      • 改变数组的length
      • 引用传参
      • new Number vs Number
      • new Object vs Object vs Object.create(null)
    • JS开发知识点
      • html classlist
      • 图片懒加载
      • 提取对象中所有属性除了某一项
      • 空值判断
    • 实现JS常见函数
      • Debounce
      • Throttle
      • Call, Apply, Bind
      • type
      • 深拷贝
      • isEuqal
      • 数组乱序
      • 数组去重
      • 实现 merge
      • 数组flat
      • 实现 map
      • 数组filter
      • 模拟new
      • 模拟实现async
      • 模拟instance of
      • Object.create(null)与{}
      • 实现promisify
      • 实现Promise.all
      • 实现Promise.race
      • 实现Promise.resolve/reject
      • 实现Promise.finnaly
      • 实现Promise
      • 实现parseInt
      • 实现foreach
      • 实现Object keys
    • 实现JS 常见操作函数
      • JS Empty
      • JS Safe Get
    • JS Worker
      • Cloudflare Worker
    • ES6
      • ES6/ES7/ES8/ES9索引
      • +,-,** 运算符
      • Let 知识点
      • 块级作用域
      • Const知识点
      • Class
      • Proxy
      • Reflect
      • Symbol
      • Promise
      • Iterator
      • For-of
      • for..in 与 for..of的区别
      • Iterator
      • Generator函数
      • async
      • 装饰器
      • 模块
      • WeakMap
      • 模块
      • 尾调用优化
    • ES6 函数
      • concat
      • reduce
      • slice
      • splice
      • Array.some
      • Array every
      • Array.prototype.includes
      • Object.entries/Object.values/Object.keys
    • Typescript
      • 使用
        • 基础类型
        • ?: 可选属性
        • Keyof
        • is
        • in
        • Partial
        • DeepPartial
        • Required
        • Exclude
        • Pick
        • Omit
        • infer
        • ReturnType
        • Record
        • 重载
        • 泛型变量
        • 泛型接口
        • 字面量类型守卫
        • type和interface的区别
        • 赋值断言
        • 类型断言
      • 编译原理
        • 编译器
      • 设计工具类型(重要)
    • V8
      • JS 数组
      • 垃圾回收
  • 🕹️框架
    • Vue
      • 基础知识
      • 长列表性能优化
      • mixin
      • 渲染函数
      • 组件间通信
      • vue中的柯里化闭包
      • vue 渲染过程
      • Vue采用虚拟DOM的目的是什么
      • keep-alive
      • nextTick
      • vue 数组变异
      • vue-computed原理
      • vue-router原理
      • vue-router权限控制
      • 路由懒加载
      • Vue diff原理
      • computed如何与视图绑定
      • scope css
      • Runtime Only vs Runtime + Compiler
      • 集中变量管理
        • 程序化的事件侦听器
        • Flux
        • Redux
        • Vuex
    • Vue3
      • Object.defineProperty与Proxy区别
    • React
      • 无法preventDefault
      • Parent控制Child(Lifting state up)
      • Dynamic Ref
      • useRef warning
      • 定义固定长度的数组
    • React-Redux
      • 基础概念
      • mapStateToProps
      • mapDispatchToProps
      • Provider
    • React Hooks
      • useState
      • useEffect
      • useContext
      • useReducer
      • useMemo
    • Nuxt
      • SSR 与 预渲染
    • Koa2
      • compose
  • 🎯算法
    • 算法与数据结构
      • 基础知识
        • 大O表示法
      • 排序
        • 基础知识
        • 冒泡排序 bubble sort
        • 选择排序
        • 插入排序
        • 前三种总结
        • 归并排序
        • 快速排序
        • 以上总结
      • 递归
        • 实现斐波那契数列
        • 深拷贝
        • Array.flat 实现
        • 爬楼梯
        • 递归问题
      • 队列
        • 队列模仿栈
      • 二叉树专题
        • 基本结构
        • 前序遍历
        • 中序遍历
        • 后序遍历
        • 重建二叉树
        • 求二叉树的遍历
        • 相同的树
      • 回溯法
      • JS 大数相加
      • 动态规划
        • 爬楼梯
      • 二分搜索
      • LRU
      • 数据结构
        • 数组
        • 栈
        • 队列
        • 链表
          • 单链表
          • 双向链表
          • 循环列表
        • 集合
        • 字典
      • Leetcode
        • 1. 两数之和
        • 2. 两数相加
        • 3. 无重复字符最长字串
        • 5. 最长回文子串
        • 6. Z字形变换
        • 7. 整数反转
        • 8. 字符串转换整数
        • 15. 三数之和
        • 134. 加油站
  • 🎁HTML
    • DOM
      • MutationObserver
      • node.contains
      • readystate
    • SVG
      • 坐标系
      • g元素
      • 实现缩放
      • react typescript svg相关
  • 🏈计算机网络
    • 浏览器
      • 浏览器与JS 线程
      • 缓存
      • 浏览器的本地存储
      • 输入URL到页面加载发生了什么
      • Preload, Prefetech,DNS Prefetching
      • defer, async 脚本
      • 前端监控异常捕捉
      • 内存泄露
      • 指纹
      • XSS
      • CSRF
      • 性能优化
      • *网页优化
      • requestAnimationFrame
      • 问题清单
        • 为什么 Javascript 是单线程的?
    • 计算机网络
      • 基础知识
      • 代理
      • HTTP1/2/3
      • HTTPS
      • HTTP请求中的keep-alive
      • http的方法
      • HTTP状态码
      • 运输层
        • TCP
          • 可靠传输
        • UDP
      • CA
      • CORS
      • Referer
      • referer, host, origin对比
      • websocket
      • CDN
  • 🥊前端生态
    • Webpack
      • 基础概念
      • 配置记录
      • sourcemap
      • 常用Webpack插件记录
      • webpack相关竞品
      • HMR
      • Tree-shaking的原理
      • Long Term Cache
      • Code Splitting
    • Babel
    • Fetch
      • Fetch取消请求
    • Axios
      • axios避免重复请求
      • 运行机制
      • 取消源码
      • axios做到多种调用方式
    • Npm
      • 设置镜像源
      • 全局安装目录
      • npx
      • 镜像源
    • Yarn
      • yarn link
    • 业务开发
      • 记住登陆
      • 统一登录/单点登录/SSO
      • 大文件上传与断点续传
      • 防止表单重复提交
      • 扫码登录如何实现的
      • 高性能网站标准
      • 性能监控
        • performance 分析
        • 上报
        • 首屏时间
    • 微前端
      • 微前端实施方式
      • single-spa重要概念
    • Hexo
      • 常用Hexo插件记录
  • 🏀后端
    • Node
      • nodejs的应用
      • API 网关
    • Java
      • 简介
    • Python
      • Pyenv
  • 🕹️面试
    • 面试真经
      • Set、Map、WeakSet 和 WeakMap 的区别?
      • Map+ParseInt
      • 红绿灯Promise问题
      • 0.1 + 0.2
      • vue面试清单
      • 状态码问题 301 302
      • 算法和数据结构清单
      • 腾讯面经
        • 电话面试
          • window的onload事件和domcontentloaded顺序
        • 远程面
          • new和instanceof的内部机制
          • typeof 和 instanceof 区别
          • flex-grow和flex-shrink属性有什么用?
      • 头条面经
        • 笔试
          • 153812.7 转化153,812.7
          • 日期转化为2小时前,1分钟前等
          • 实现sum(1)(2)(3) = 6
          • 最多频次
          • 类继承面试
          • 前端请求并发控制
          • CSS画三角形
          • CSS 画正方形
          • 下载页面的所有图片
          • 实现链式调用
          • 100 * 100 的 Canvas 占内存多大
      • javascript-questions
        • 原型链与new优先级
        • 函数+模板字符串
        • 对象引用
        • use strict
        • 声明提升相关
        • 对象键值存储
        • target与事件冒泡
        • call与bind
        • falsy
        • map, reduce和正则
        • event-loop与promise
        • 变量提升和声明作用域
    • To-do
      • axios 重放多种策略
  • 🤖开源
    • 开源项目
      • Hooks
      • 论坛
      • 开发流程
      • 前端监控
      • 模板
      • svg
  • 🧸其他
    • Linux
      • 免密登陆
      • Mac终端代理
    • Git
      • 创建 ssh rsa
      • 删除分支
      • 覆盖已有提交
      • 合并多个commit
      • 撤销merge
    • 正则
      • 题目
        • 转换为驼峰命名法
        • JS实现千位分隔符
        • 获取 url 参数
        • 用正则实现trim() 清除字符串两端空格
    • 设计模式
      • 简单工厂模式
      • 抽象工厂模式
      • 单例模式
      • 装饰器模式
      • 适配器模式
      • 代理模式
      • 观察者模式
      • 发布-订阅模式
      • 观察者模式与发布-订阅模式的区别是什么?
      • 单例模式
      • 工厂模式
      • 享元模式
    • 计算机理论
      • solid原则
        • SRP | The Single Responsibility Principle
        • OCP | The Open Closed Principle
        • LSP | The Liskov Substitution Principle
        • ISP | The interface Segregation Principle
        • DIP | The Dependency Inversion Principle
由 GitBook 提供支持
在本页
  • 执行顺序
  • 宏任务
  • 微任务
  • 题目
  • await
  • promise
  • Promise新建后会立即执行
  • 调用resolve或reject并不会终结 Promise 的参数函数的执行。
  • 浏览器操作与requestAnimationFrame

这有帮助吗?

  1. 🎉JavaScript
  2. JS 概念

Event-loop

上一页闭包下一页跨域

最后更新于5年前

这有帮助吗?

执行顺序

一个掘金的老哥(ssssyoki)的文章摘要: 那么如此看来我给的答案还是对的。但是js异步有一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入eventqueue,然后在执行微任务,将微任务放入eventqueue最骚的是,这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回掉函数,然后再从宏任务的queue上拿宏任务的回掉函数。 我当时看到这我就服了还有这种骚操作。

  • 而宏任务一般是:包括整体代码script,setTimeout,setInterval、setImmediate、requestAnimationFrame。

  • 微任务:原生Promise(有些实现的promise将then方法放到了宏任务中)、process.nextTick、Object.observe(已废弃)、 MutationObserver 记住就行了。

setTimeout和setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮Event Loop时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到再下一轮Event Loop时重新判断。这意味着,setTimeout指定的代码,必须等到本次执行的所有代码都执行完,才会执行。

每一轮Event Loop时,都会将“任务队列”中需要执行的任务,一次执行完。setTimeout和setInterval都是把任务添加到“任务队列”的尾部。因此,它们实际上要等到当前脚本的所有同步任务执行完,然后再等到本次Event Loop的“任务队列”的所有任务执行完,才会开始执行。由于前面的任务到底需要多少时间执行完,是不确定的,所以没有办法保证,setTimeout和setInterval指定的任务,一定会按照预定时间执行。

宏任务

#

浏览器

Node

I/O

✅

✅

setTimeout

✅

✅

setInterval

✅

✅

setImmediate

❌

✅

requestAnimationFrame

✅

❌

微任务

#

浏览器

Node

process.nextTick

❌

✅

MutationObserver

✅

❌

Promise.then catch finally

✅

✅

题目

async function async1() {
  console.log(1);
  const result = await async2();
  console.log(3);
}

async function async2() {
  console.log(2);
}

Promise.resolve().then(() => {
  console.log(4);
});

setTimeout(() => {
  console.log(5);
});

async1();
console.log(6);

答案是[1,2,6,4,3,5]。这道题目主要考对JS宏任务和微任务的理解程度,JS的事件循环中每个宏任务称为一个Tick(标记),在每个标记的末尾会追加一个微任务队列,一个宏任务执行完后会执行所有的微任务,直到队列清空。上题中我觉得稍微复杂点的在于async1函数,async1函数本身会返回一个Promise,同时await后面紧跟着async2函数返回的Promise,console.log(3)其实是在async2函数返回的Promise的then语句中执行的,then语句本身也会返回一个Promise然后追加到微任务队列中,所以在微任务队列中console.log(3)在console.log(4)后面

await

遇到await会同步执行await后面的函数,挂起await下面的为微任务

setTimeout(function () {
  console.log('6')
}, 0)
console.log('1')
async function async1() {
  console.log('2')
  await async2()
  console.log('5')
}
async function async2() {
  console.log('3')
}
async1()
console.log('4')
  1. 6是宏任务在下一轮事件循环执行

  2. 先同步输出1,然后调用了async1(),输出2。

  3. await async2() 会先运行async2(),5进入等待状态。

  4. 输出3,这个时候先执行async函数外的同步代码输出4。

  5. 最后await拿到等待的结果继续往下执行输出5。

  6. 进入第二轮事件循环输出6。

promise

Promise新建后会立即执行

let promise = new Promise(function(resolve, reject) {
    consoloe.log('Promise')
    resolve()
})

promise.then(function() {
    consoloe.log('Resolved.')
})

console.log('Hi!')

// Promise
// Hi!
// Resolved

调用resolve或reject并不会终结 Promise 的参数函数的执行。

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。

new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

浏览器操作与requestAnimationFrame

假设有这样的一些DOM结构:

<style>
  #outer {
    padding: 20px;
    background: #616161;
  }

  #inner {
    width: 100px;
    height: 100px;
    background: #757575;
  }
</style>
<div id="outer">
  <div id="inner"></div>
</div>
const $inner = document.querySelector('#inner')
const $outer = document.querySelector('#outer')

function handler () {
  console.log('click') // 直接输出

  Promise.resolve().then(_ => console.log('promise')) // 注册微任务

  setTimeout(_ => console.log('timeout')) // 注册宏任务

  requestAnimationFrame(_ => console.log('animationFrame')) // 注册宏任务

  $outer.setAttribute('data-random', Math.random()) // DOM属性修改,触发微任务
}

new MutationObserver(_ => {
  console.log('observer')
}).observe($outer, {
  attributes: true
})

$inner.addEventListener('click', handler)
$outer.addEventListener('click', handler)

如果点击#inner,其执行顺序一定是:click -> promise -> observer -> click -> promise -> observer -> animationFrame -> animationFrame -> timeout -> timeout。

因为一次I/O创建了一个宏任务,也就是说在这次任务中会去触发handler。 按照代码中的注释,在同步的代码已经执行完以后,这时就会去查看是否有微任务可以执行,然后发现了Promise和MutationObserver两个微任务,遂执行之。 因为click事件会冒泡,所以对应的这次I/O会触发两次handler函数(_一次在inner、一次在outer_),所以会优先执行冒泡的事件(_早于其他的宏任务_),也就是说会重复上述的逻辑。 在执行完同步代码与微任务以后,这时继续向后查找有木有宏任务。 需要注意的一点是,因为我们触发了setAttribute,实际上修改了DOM的属性,这会导致页面的重绘,而这个set的操作是同步执行的,也就是说requestAnimationFrame的回调会早于setTimeout所执行。