乐趣区

浅谈JavaScript中的事件循环机制

事件循环(Event Loop)
背景
JavaScript 是一门单线程非阻塞的脚本语言,单线程意味着,JavaScript 代码在执行的任何时候,都只有一个主线程来处理所有的任务。而非阻塞则是当代码需要进行一项异步任务(无法立刻返回结果,需要花一定时间才能返回的任务,如 I / O 事件)的时候,主线程会挂起(pending)这个任务,然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。在意识到该问题之际,html5 新特性中的 web worker 可以让 JavaScript 成为一门多线程语言,但实际开发中使用 web worker 存在着诸多限制。
浏览器的 Event Loop
js 引擎的过程
同步编程案例
思考一下这段代码的结果?
显然,同步函数是由上至下的执行顺序
异步编程案例

因为 setTimeout 是异步函数,js 执行机制是先将同步函数执行完毕,再执行异步函数
执行栈与事件队列
当 javascript 代码执行的时候会将不同的变量存于内存中的不同位置:堆(heap)和栈(stack)中来加以区分。其中,堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。如下:当我们调用一个方法的时候,js 会生成一个与这个方法对应的执行环境(context),又叫执行上下文。这个执行环境中存在着这个方法的私有作用域,上层作用域的指向,方法的参数,这个作用域中定义的变量以及这个作用域的 this 对象。而当一系列方法被依次调用的时候,因为 js 是单线程的,同一时间只能执行一个方法,于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。当脚本第一次执行的时候,js 引擎会解析这段代码,并将其中的同步代码按照执行顺序加入执行栈中,然后从头开始执行。如果当前执行的是一个方法,那么 js 会向执行栈中添加这个方法的执行环境,然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后,js 会退出这个执行环境并把这个执行环境销毁,回到上一个方法的执行环境。这个过程反复进行,直到执行栈中的代码全部执行完毕。
宏任务(macro taks)与微任务(micro task)
在异步函数中,可以细分为两种任务,宏任务与微任务。宏任务有以下几种:①I/O ②setTimeout ③setInterval ④setImmediate ⑤requestAnimationFrame
微任务有以下几种:①process.nextTick ②MutationObserver ③Promise.then catch finally
异步编程案例

当异步函数中同时存在微任务和宏任务的时候,先执行完微任务,再执行宏任务
总结
浏览器中的事件循环机制就是 js 在执行代码时,由上至下遍历,优先执行同步函数,在遇到异步函数的时候,将该任务放置执行栈;当任务队列中没有同步函数之后便开始执行执行栈中的异步函数,优先执行微任务,后执行宏任务。js 执行顺序:同步函数 -> 微任务 -> 宏任务

退出移动版