📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • JavaScript事件循环
  • 执行栈
  • 事件队列
  • 事件循环
  • 练手
  • 扩展
  • 参考
在GitHub上编辑
  1. 前端技术
  2. 浏览器原理

事件循环

JavaScript事件循环

JavaScript是单线程非阻塞的脚本语言,这意味着JavaScript只有一条主线程来处理所有任务,当主线程遇到同步任务时会直接处理此任务,当遇到异步任务时,会先将此任务“挂”起来,等到条件成熟时再去执行该任务的回调函数。

JavaScript存在一个类似while(true)一样的循环机制,一直运行着,它的作用就是处理同步任务和异步任务。

执行栈

当我们我们执行一个方法时,JavaScript会生成与这个方法对应的执行环境,我们称它为执行上下文,这个执行上下文保存着这个方法的私有作用域、上层作用域的指向、方法的参数、this对象和局部变量。而执行上下文会被添加到一个栈里,这个栈称为执行栈,遵循后进先出的规则。

执行上下文有三种:

  • 全局执行上下文

  • 函数执行上下文

  • eval执行上下文(eval函数容易导致恶意攻击,不推荐使用)

我们以主线程执行函数调用语句为例,当主线程执行到一条函数调用语句时,并不会立马执行该函数,而是会先生成该函数的执行上下文,将函数执行上下文压入栈中,然后再执行函数内的代码,然后返回结果。当函数内的代码未执行完毕时,此函数的执行上下文一直在栈中,而函数执行完毕时,该函数执行上下文会出栈销毁,这种出栈入栈的过程反复进行,直到执行栈中的代码全部执行完毕。

由此可见,执行栈是JavaScript管理执行上下文的。在整个函数执行过程中,确保函数执行上下文在函数执行过程中一直存在,进而确保函数执行时函数内的this对象、局部变量、参数等可被访问。

注意:并非所有栈顶的执行上下文出栈都会被销毁,如果它是被挂起并保留以供可访问的生成器对象,则不能销毁它。

事件队列

当主线程遇到异步任务时,会将其加入到队列(先进先出)中,而根据异步任务的不同,所进入的队列又有所不同,宏任务进入任务队列,微任务会进入到微任务队列。

异步任务分为

  • 宏任务

  • 微任务

属于微任务的事件包括但不限于以下几种:

  • Promise.then/catch/finally

  • MutationObserver

  • Object.observe

  • process.nextTick

属于宏任务的事件包括但不限于以下几种:

  • setTimeout

  • setInterval

  • setImmediate

  • MessageChannel

  • requestAnimationFrame

  • I/O

  • UI交互事件

事件循环

事件循环有以下四个关键步骤:

  1. Evaluate Script:执行script中的js代码,同步任务直接入栈执行,异步任务则加入到对应的队列中

  2. Run a Task:取出一个任务队列中的宏任务执行

  3. Run all Microtasks:取出微任务队列中所有的微任务执行

  4. Rerender:重新渲染UI,进入下一个循环,重新执行第二步

也就是说,主线中遇到script中首先会评估script中的代码,如果遇到同步任务则直接压入执行栈中执行,而遇到异步任务则跟随其是宏任务还是微任务而添加到对应的任务队列或微任务队列中去,执行检查微任务队列,将微任务队列中的所有微任务执行完毕,然后重新渲染UI,进入下一次事件循环,从第二步Run a Task开始,从任务队列中取出一个宏任务执行,如果执行的过程中产生了新的宏任务和微任务则同样是加入到对应的任务队列中去,然后执行微任务队列,最后重新渲染UI,进入下一次事件循环。

练手

console.log(1)

async function async1() {
    await async2()
    console.log('2')
}
async function async2() {
	console.log('3')
}
async1()

setTimeout(function() {
	console.log('4')
}, 0)

new Promise(resolve => {
    console.log('5')
    resolve()
})
.then(function p1() {
	console.log('6')
})
.then(function p2() {
	console.log('7')
})

console.log('8')

// 1 3 5 8 2 6 7 4

执行步骤

  1. 同步任务console.log('1')直接执行,打印1

  2. 运行async1,执行await async2(),打印3,await后面的代码console.log('2')当做微任务添加到微任务队列中,执行后面的代码。

  3. setTimeout是宏任务,添加到宏任务队列

  4. new Promise()是同步任务,Promise.then()才是微任务,因此打印 5

  5. Promise.then()是微任务,将p1函数添加到微任务队列

  6. 同步任务console.log('8'), 直接打印 8

  7. 执行微任务队列中的微任务,打印 2 ,6,执行p1时又创建了新的微任务p2,一起执行,打印7

  8. re-render

  9. 检查宏任务队列,取出一个宏任务执行,打印 4

  10. 执行完毕

扩展

无限微任务

根据事件循环的特性,假设有下面两种函数,哪一种会导致浏览器卡死?

function p1(){Promise.resolve().then(p1);console.log(1)}
function p2(){setTimeout(p2);console.log(2)}

很明显是p1,由于p1函数一直会创建新的微任务,导致事件循环一直卡在执行微任务步骤中,无法进入下一次循环,也无法重新渲染UI,因此页面就会出现卡死的情况。

这提示我们,不要无限地创造微任务。另外一种可能会出现无限创建微任务的情况是在解析自身的thenable 对象上调用Promise.resolve

let thenable = {
  then: (resolve, reject) => {
    resolve(thenable)
  }
}

Promise.resolve(thenable)  //这会造成一个死循环

避免js长时间执行

试试运行以下代码

window.onscroll = function(){
    let a=0;
    for(let i=0;i<Number.MAX_SAFE_INTEGER;i++){
        a++
    };
    console.log(a)
}

事件处理程序是宏任务,当事件处理程序执行时间过长时,就会阻塞UI重新渲染,导致页面卡顿,甚至是直接卡死。

参考

上一页JavaScript事件循环下一页跨域

最后更新于1年前

一个可视化Even Loop的工具,推荐使用:

标准 HTML (whatwg.org)
JS Visualizer 9000 (jsv9000.app)