JavaScript执行机制

一直没过多关注js代码的执行顺序，只觉得是单线程同步一行一行按顺序走代码，今天看到掘金上一位大神写的js执行机制文章，顿悟，下面简单粗暴先上图

众所周知，对于页面上比较大的文件，如果我们还是采用同步的方式，那么就会导致页面的渲染变得十分缓慢，很影响用户体验，故聪明的程序员前辈们引入了同步和异步，把页面骨架和需要的元素放在同步队伍中，对于一些比较大的图片音乐视频或暂时用不到的代码放到异步操作中，上述导图用文字表述如下：

• 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
• 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
• 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
• 上述过程会不断重复，也就是常说的Event Loop(事件循环)

那如何判断主线程执行栈为空呢？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。
说了这么多文字，不如直接一段代码更直白：

let data = [];
$.ajax({
    url:www.javascript.com,
    data:data,
    success:() => {
        console.log('发送成功!');
    }
})
console.log('代码执行结束');复制代码

上面是一段简易的ajax请求代码：

• ajax进入Event Table，注册回调函数success。
• 执行console.log('代码执行结束')。
• ajax事件完成，回调函数success进入Event Queue。
• 主线程从Event Queue读取回调函数success并执行。

宏任务和微任务

除了广义的同步任务和异步任务，我们对任务有更精细的定义：

• macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
• micro-task(微任务)：Promise，process.nextTick

不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。

事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。
事件循环，宏任务，微任务的关系如图所示：

最后的最后

• javascript是一门单线程语言
• Event Loop是javascript的执行机制