JS时间循环-宏任务与微任务

1、关于JavaScript

JavaScript是一门单线程语言，在最新的html5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！

2、javascript事件循环

既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。

那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类：

• 同步任务

• 异步任务

当我们打开网站时，网页的渲染过程就是一大堆同步任务，比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务，就是异步任务。

关于这部分有严格的文字定义，但本文的目的是用最小的学习成本彻底弄懂执行机制，所以我们用导图来说明：

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

3、Promise与process.nextTick(callback)

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

事件循环的进程模型

• 选择当前要执行的任务队列，选择任务队列中最先进入的任务，如果任务队列为空即null，则执行跳转到微任务（MicroTask）的执行步骤。
• 将事件循环中的任务设置为已选择任务。
• 执行任务。
• 将事件循环中当前运行任务设置为null。
• 将已经运行完成的任务从任务队列中删除。
• microtasks步骤：进入microtask检查点。
• 更新界面渲染。
• 返回第一步。

5、总结

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

6、深入浅出分析process.nextTick() 

process.nextTick(() => console.log(3));

process.nextTick(() => console.log(3));Promise.resolve().then(() => console.log(4)); // 3 // 4

process.nextTick(() => console.log(1));Promise.resolve().then(() => console.log(2));process.nextTick(() => console.log(3));Promise.resolve().then(() => console.log(4)); // 1 // 3 // 2 // 4