首页 > 其他分享 >前端必备基础系列(四)事件循环

前端必备基础系列(四)事件循环

时间:2024-12-27 16:53:03浏览次数:5  
标签:microTask 异步 队列 必备 任务 循环 为空 执行 前端

Event Loop
浏览器的事件循环是一个在javascript引擎和渲染引擎之间协调工作的机制。因为javascript是单线程的,所以所有需要被执行的操作都需要通过一定的机制来协调它们有序的进行。

它的主要任务是监视调用栈(Call Stack)和任务队列(Task Queue)
当调用栈为空时,事件循环会从任务队列中取出任务执行

JavaScript单线程任务被分为同步任务和异步任务,同步任务会在调用栈中按照顺序等待主线程依次执行,异步任务会在异步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。

目前多数浏览器是多进程的,每打开一个tab页面就会开启一个新进程,每个进程中又有多个线程,其中包括执行JavaScript代码的线程。

宏任务是一个比较大的任务单位,可看作是一个独立的工作单元。
当一个宏任务执行完毕后,浏览器可以在两个宏任务之间进行页面渲染或处理其他事务(比如执行微任务)
微任务的执行优先级高于宏任务
MutationObserver:监视DOM变更的API,在Vue2源码中也有使用它来实现微任务的调度

宏任务(MacroTasks):包括脚本(script)、setTimeout、setInterval、I/O、UI rendering等
微任务(MicroTasks):包括Promise.then、MutationObserver、process.nextTick(仅在node中)、queueMicrotask等

  • 执行当前宏任务
  • 执行完当前宏任务后,检查并执行所有微任务。在微任务执行期间产生的新的微任务也会被连续执行,直到微任务队列清空。
  • 渲染更新界面(如果有必要)
  • 请求在一个宏任务,重复上述过程

执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务(microTask)队列是否为空,如果为空的话,就执行Task(宏任务),否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后,检查微任务(microTask)队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务(microTask)后,设置微任务(microTask)队列为null,然后再执行宏任务,如此循环。

未完待续

标签:microTask,异步,队列,必备,任务,循环,为空,执行,前端
From: https://www.cnblogs.com/codeyx/p/18636177

相关文章

  • 小学1-6年级必备:精讲字卡和写字表合集,帮孩子练出一手好字
    正文:小学阶段是孩子语文学习的重要时期,特别是汉字书写的培养尤为关键。为了帮助孩子掌握规范的汉字笔画、拼音、组词以及书写结构,这里特别推荐一套小学1-6年级同步精讲字卡与写字表合集。这套内容覆盖了小学阶段所有的重点字词,家长和老师可以轻松打印,作为学习和练字的工具,帮助孩......
  • Python数据结构之双向循环链表
    1、循环双向链表特点通过当前结点直接获取上一结点通过头结点的上一结点直接可以去找到尾结点可以进行反向循环链表,即反转链表2、头结点链表头:在数据结构中,链表是一种常见的存储结构。链表的每个节点包含数据和指向下一个节点的指针。链表头是链表的第一个节点,它在链表的......
  • 前端响应校验文件
    importVuefrom'vue'importaxiosfrom'axios'import{baseURL,contentType,debounce,invalidCode,noPermissionCode,requestTimeout,successCode,tokenName,loginInterception,}from'@/config'importsto......
  • asp.net core webapi 向前端返回一个文件
    后端接口返回文件[Authorization]//给下载模版添加权限[HttpGet]publicIActionResultDownloadTemplate(){//AppContext.BaseDirectory用于获取项目根目录varfilePath=$"{AppContext.BaseDirectory}/MyStaticFiles/取货模板.csv";if(!System.IO.File.E......
  • 前端经典面试合集(二)——Vue/React/Node/工程化工具/计算机网络
    1.说说Vue中的Diff算法Vue的Diff算法主要用于优化虚拟DOM和实际DOM之间的比较过程。它通过以下几种策略来提高性能:最小化对DOM的操作:Vue通过在内存中构建一个虚拟DOM树,在虚拟DOM树与真实DOM树之间进行比较和更新,这样就避免了频繁的直接操作DOM,提高......
  • 前端面试题合集(一)——HTML/CSS/Javascript/ES6
    前端经典面试题总结前端开发领域涵盖了大量的知识点,面试中的经典问题通常集中在HTML、CSS、JavaScript及ES6等基础技能上。以下是针对这些知识点的一些总结:1.HTMLHTML是Web页面结构的基础,它定义了网页的内容和结构。面试中的HTML问题常常涉及到常见标签的使用......
  • 你自我感觉你的前端水平如何?
    对于前端开发水平的评价,通常可以从以下几个方面进行考量:技术掌握程度:包括HTML、CSS、JavaScript等前端基础技术的熟练程度,以及对前端框架、库和工具的使用经验。项目经验:参与过的项目数量、规模和复杂度,以及在这些项目中承担的角色和贡献。问题解决能力:遇到技术难题时的......
  • 玩转前端正则表达式
    文章首发本人博客,由于格式和图片解析问题,可以前往阅读原文JavaScript中的正则是Perl的大子集,但Perl内部的一些表达式却没有继承正则表达式是用于匹配字符串中字符组合的模式(可参考MDN教程)扫码关注公粽号,查看更多优质文章一个例子使用正则将一个数字以科学计数法进行......
  • Spring如何处理循环依赖
    Spring的循环依赖在Spring框架中,循环依赖是指两个或多个Bean之间互相依赖,形成一个循环。例如,BeanA依赖BeanB,而BeanB又依赖BeanA,这就导致了循环依赖的问题。循环依赖在Spring启动过程中确实是一个需要特别注意的问题,但Spring容器是有机制来处理这种情况的......
  • 前端主流知识体系
    阿里大佬仅用了60分钟就把前端主流知识体系及学习路线都给讲明白了!​ https://www.bilibili.com/video/BV1K4q8YtEJ7 11、JavaScript8分享<编辑DOMBOMjQueryscope闭包编程范式逻辑执行前端核心知识体系JavaScript使用Promise异步调用asyncawaitXHRaxiosbrows......