理解JS的事件循环过程

众所周知，JS引擎是单线程的，但是为了实现异步处理，会有其他线程来处理异步的事件，本篇来详细介绍JS处理异步函数的过程。首先了解几个概念：

宿主环境：JS运行的环境称为宿主环境，需要清楚的是JS不仅可以在浏览器上运行，也可以在服务器上运行。

执行栈(call stack)：一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，销毁执行环境。

JS引擎执行顺序：执行的是执行栈的最顶部

异步函数：某些函数不会立即执行，需要等到某个时机到达后才会执行，这样的函数称之为异步函数，例如事件处理函数。异步函数的执行时机受宿主环境控制。

浏览器宿主环境的5个线程：

JS引擎：负责执行执行栈最顶部代码
GUI线程：负责渲染页面
事件监听线程：负责监听各种事件
计时线程：负责计时
网络线程：负责网络通信

接下来解释一下JS处理异步函数的过程：当浏览器的5个线程上发生了某个事件，如果该线程发现，这个事件有处理程序，它会将该处理程序加入一个叫做事件队列的内存，当JS引擎发现，执行栈中已经没有了任何内容后，会将事件队列中的第一个函数加入到执行栈中执行。JS引擎对事件的取出执行方式，以及与宿主环境的配合，称之为事件循环。

事件队列在不同的宿主环境中有所差异，大部分宿主环境会将事件队列进行细分，在浏览器中，事件队列分为两种：

宏任务（队列）：macroTask，包括计时器结束的回调，事件回调，http回调等绝大部分异步函数
微任务（队列）：microTask，包括MutationObserver，Promise产生的回调

【注】当执行栈清空时，JS引擎首先会将微任务中的所有任务依次执行结束，如果没有微任务，则执行宏任务

理解JS的事件循环过程相关推荐

后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环 ...
简单理解js闭包、类型引用....第一章
js 闭包函数.类型引用.this指向.对象原型链...这些东西让我们对js又爱又恨!js虐我千百遍,我待js如初恋. 很多初学者一开始会觉得这些概念没什么用,导致对这些东西产生一种抵抗力.接下来我们 ...
详细理解JS的三座大山
如图所示,JS的三座大山: 同步.异步作用域.闭包原型.原型链 1. 同步.异步 JavaScript执行机制,重点有两点: JavaScript是一门单线程语言 Event Loop(事件循环) ...
深入理解JavaScript的事件循环（Event Loop）一、什么是事件循环
深入理解JavaScript的事件循环(Event Loop) 一.什么是事件循环 JS的代码执行是基于一种事件循环的机制,之所以称作事件循环,MDN给出的解释为因为它经常被用于类似如下的方式来实现 ...
彻底理解 JS Event Loop（浏览器环境）
最近罗列了一些软件开发基础知识点,计划逐一的.彻底的理解每一个知识点,并为每个知识点写一篇详细的,图文并茂的文章.这篇是关于浏览器环境下 JS 的 Event Loop 机制(如有错误,欢迎指出). ...
好程序员web前端分享如何理解JS单线程
好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...
Vue.js笔记------事件
一.事件与事件流 1.事件与事件流 [事件] JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性.常见的有加载事件.鼠标事件. [事件流] 由于 ...
js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...

理解JS的事件循环过程

理解JS的事件循环过程相关推荐

最新文章

热门文章