JS执行机制

wow_worktile 发布于2019-08-26 13:36 / 3243人阅读

摘要：事件表每次调用函数或执行异步操作时，都会将其添加到事件表中，事件表负责记录每个事件完成后执行的回调函数，并监听事件，事件完成后会把事件的回调函数发送到事件队列。事件队列事件队列接收来自事件表的回调函数，并根据顺序执行。

前言

先上一段代码，可以根据自己之前对JS执行机制的理解，进行分析

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

答案：
script start
script end
promise1
promise2
setTimeout

如果自己的答案和上面的答案有出入，请继续阅读

基本概念的阐述

调用堆栈

JavaScript有一个多带带的调用堆栈，负责执行JS代码，当即将执行一个函数时，此函数就会被添加到调用堆栈中，当此函数执行完，则会出栈。

事件表

每次调用setTimeout函数或执行异步操作时，都会将其添加到事件表中，事件表负责记录每个事件完成后执行的回调函数，并监听事件，事件完成后会把事件的回调函数发送到事件队列。

事件队列

事件队列接收来自事件表的回调函数，并根据顺序执行。事件队列中存储两种任务：微任务和宏任务

在当前的微任务没有执行完成时，是不会执行下一个宏任务的。
这里有两种说法，一种说法把刚开始执行的整体JS代码认为是一个宏任务，先执行整体JS代码这一个宏任务，执行完成后，再执行微任务列表中的所有微任务，所以认为先执一个行宏任务再执行所有微任务

另外一种说法没有把刚开始的JS代码当做宏任务，所以起始执行的是微任务，所有微任务执行完再执行宏任务，认为先执行微任务再执行宏任务
其实两种说法的核心是一样的，都是执行一个宏任务执行所有微任务
事件循环

事件循环就是一个持续运行的进程，用于检查调用堆栈是否为空。将我们上面所述连接起来，并循环执行。

JS执行机制

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

再次分析此段代码
最初始状态：JS调用栈为空，任务队列中宏任务队列有script代码块就绪
第一步：检查调用栈为空，将宏任务script入栈，开始向下执行
第二步：当遇到异步操作时，执行异步，并将异步事件与其回调函数注册到事件列表，同步代码继续执行
第三步：当事件表监听到异步事件已经完成，将其事件的回调函数入队（任务队列）
第四步：检查到调用栈为空，先将微任务依次入栈（调用堆栈）执行，微任务列表为空时，将宏任务入栈（调用堆栈）执行
更多关于JS执行机制的理解请点击下面链接，有动画效果有助于理解特别推荐
Tasks, microtasks, queues and schedules

云服务器 GPU云服务器 js执行机制执行机制 php执行的机制原理 JS调用栈机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109138.html

10分钟理解JS引擎的执行机制

摘要：深入理解引擎的执行机制灵魂三问为什么是单线程的为什么需要异步单线程又是如何实现异步的呢中的中的说说首先请牢记点是单线程语言的是的执行机制。深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2...

zzbo 2019-08-26 17:04 评论0 收藏0
深入理解js引擎的执行机制

摘要：深入理解引擎的执行机制最近在反省，很多知识都是只会用，不理解底层的知识。在阅读之前，请先记住两点是单线程语言的是的执行机制。所以，是存在异步执行的，比如单线程是怎么实现异步的场景描述通过事件循环，所以说，理解了机制，也就理解了的执行机制啦。深入理解js引擎的执行机制最近在反省，很多知识都是只会用，不理解底层的知识。所以在开发过程中遇到一些奇怪的比较难解决的bug，在思考的时候就会收...

feng409 2019-08-22 15:29 评论0 收藏0
前端进阶系列(八):JS执行机制

摘要：一直以来，对的执行机制都是模棱两可，知道今天看了文章这一次，彻底弄懂执行机制和的规范和实现，才对的执行机制有了深入的理解，下面是我的学习总结。个要点是单线程语言是的执行机制，为了实现主线程的不阻塞，就这么诞生了。一直以来，对JS的执行机制都是模棱两可，知道今天看了文章—《这一次，彻底弄懂JavaScript执行机制》和《Event Loop的规范和实现》，才对JS的执行机制有了深入的...

JackJiang 2019-08-23 12:25 评论0 收藏0
Event Loop - JS执行机制

摘要：心塞塞根据规范，事件循环是通过任务队列的机制来进行协调的。等便是任务源，而进入任务队列的是他们指定的具体执行任务回调函数。然后当前本轮的结束，主线程可以继续取下一个执行。依然是：经济基础决定上层建筑。说明首先，旨在搞清常用的同步异步执行机制其次，暂时不讨论node.js的Event Loop执行机制，以下关于浏览器的Event Loop执行机制最后，借鉴了很多前辈的研究文...

muddyway 2019-08-22 17:32 评论0 收藏0
Javascript系列之javascript机制

摘要：异步任务必须指定回调函数，当异步任务从任务队列回到执行栈，回调函数就会执行。事件循环主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。参考链接：这一次，彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程，JS运行机制...

13651657101 2019-08-22 15:50 评论0 收藏0