转发链接：
前言
前一段小编也详细讲过关于 的运行机制：「硬核JS」一次搞懂JS运行机制，纯文字化的理论，对于初学者来说很难去理解它。这次小编一起重温并且图形化+案例细说。
1. 单线程的
js是单线程的，基于事件循环，非阻塞IO的。特点： 处理I／O型的应用，不适合CPU运算密集型的应用。说明： 事件循环中使用一个事件队列，在每个时间点上，系统只会处理一个事件，即使电脑有多个CPU核心，也无法同时并行的处理多个事件。因此，node.js在I／O型的应用中，给每一个输入输出定义一个回调函数，node.js会自动将其加入到事件轮询的处理队列里，当I／O操作完成后，这个回调函数会被触发，系统会继续处理其他的请求。
function fn(){
console.log('start');
setTimeout(()=>{
console.log('setTimeout');
},0);
console.log('end');
}
fn() // 输出 start end setTimeout2. 中的同步异步
js的同步异步是如何实现的?js中包含诸多创建异步的函数如:，，dom事件，ajax，，.等函数
因为单线程js箭头函数，所以代码自上而下执行，所有代码被放到执行栈中执行；遇到异步函数将回调函数添加到一个任务队列里面；当执行栈中的代码执行完以后，会去循环任务队列里的函数;将任务队列里的函数放到执行栈中执行;如此往复，称为事件循环;
function fn() {
setTimeout(()=>{
console.log('a');
},0);
new Promise((resolve)=>{
console.log('b');
resolve();
}).then(()=>{
console.log('c')
});
}
fn() // b c a3. 宏任务和微任务
两任务在同步异步中处于什么地位？两个任务分别处于任务队列中的宏队列与微队列中;宏队列与微队列组成了任务队列;任务队列将任务放入执行栈中执行
宏任务：
宏队列，，也叫tasks。异步任务的回调会依次进入macro task queue，等待后续被调用，这些异步任务包括：
微任务：
微队列，，也叫jobs。异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包括：
执行全局同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如等）；
全局代码执行完毕后，执行栈Stack会清空；
从微队列中取出位于队首的回调任务，放入执行栈Stack中执行，执行完后微队列长度减1；
继续循环取出位于微队列的任务，放入执行栈Stack中执行，以此类推，直到直到把微任务执行完毕。注意，如果在执行微任务的过程中，又产生了微任务，那么会加入到微队列的末尾，也会在这个周期被调用执行；
微队列中的所有微任务都执行完毕，此时微队列为空队列，执行栈Stack也为空；
取出宏队列中的任务，放入执行栈Stack中执行；
执行完毕后，执行栈Stack为空；
重复第3-7个步骤；
以上才是一个完整的事件循环
function fn(){
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3);
});
},0);
new Promise((resolve, reject) => {
console.log(4);
resolve(5);
}).then(data => {
console.log(data);
});
setTimeout(() => {
console.log(6);
},0);
console.log(7);
}
fn(); //流程重现
执行函数同步语句；同步语句执行完毕，从微队列中依次取出任务执行js箭头函数，直到微队列为空这里微队列中只有一个任务，执行完后开始从宏队列中取任务执行取出一个宏任务执行完毕，然后再去微任务队列 queue中依次取出执行微队列全部执行完，再去宏队列中取第一个任务执行以上全部执行完毕，执行栈，宏队列，微队列均为空执行栈：[]宏任务：[]微任务：[]打印结果：
function fn(){
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
}).then((data) => {
console.log(data);
Promise.resolve().then(() => {
console.log(6)
}).then(() => {
console.log(7)
setTimeout(() => {
console.log(8)
}, 0);
});
})
setTimeout(() => {
console.log(9);
})
console.log(10);
}
fn();4. 中的事件循环
中的宏任务和微任务
的Event Loop中，执行宏队列的回调任务有6个阶段，如下图：
各个阶段执行的任务如下：的宏队列：
这4个都属于宏队列，但是在浏览器中，可以认为只有一个宏队列，所有的宏任务都会被加到这一个宏队列中，但是在中，不同的宏任务会被放置在不同的宏队列中
的微队列：
在浏览器中，也可以认为只有一个微队列，所有的微任务都会被加到这一个微队列中，但是在中，不同的微任务会被放置在不同的微队列中
中的事件循环过程执行全局的同步代码；执行微任务先执行next tick queue所有任务，再执行other micro tasks queue中的所有任务；开始执行宏任务，共6个阶段，从第1个阶段开始执行相应每一个阶段宏队列中的所有任务，注意，这里是所有每个阶段宏任务队列的所有任务，在浏览器的Event Loop中是只取宏队列的第一个任务出来执行，每一个阶段的宏任务执行完毕后，开始执行微任务，回到步骤2；
Queue -> 步骤2 ->I/O Queue -> 步骤2 ->Check Queue -> 步骤2 ->Close Queue -> 步骤2 -> Queue
function fn(){
console.log('start');
setTimeout(() => { // callback1
console.log(111);
setTimeout(() => { // callback2
console.log(222);
}, 0);
setImmediate(() => { // callback3
console.log(333);
});
process.nextTick(() => { // callback4
console.log(444);
});
}, 0);
setImmediate(() => { // callback5
console.log(555);
process.nextTick(() => { // callback6
console.log(666);
});
});
setTimeout(() => { // callback7
console.log(777);
process.nextTick(() => { // callback8
console.log(888);
});
}, 0);
process.nextTick(() => { // callback9
console.log(999);
});
console.log('end');
}
fn();
// before version 11.0.0 start end 999 111 777 444 888 555 333 666 222
// after version 11.0.0 start end 999 111 444 777 888 555 666 333 222PS：版本不同导致运行结果不同
总结：练习：宏任务执行顺序；微任务执行顺序；宏任务微任务结合执行顺序；推荐经典实例学习资料文章
《一个轻量级 全文搜索库，轻松实现站内离线搜索》
《推荐Web程序员常用的15个源代码编辑器》
《10个实用的JS技巧「值得收藏」》
《细品269个小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个小函数，让你少加班熬夜（六）「值得收藏」》
《深入教你内存泄漏如何防范》
《手把手教你7个有趣的 项目-上「附源码」》
《手把手教你7个有趣的 项目-下「附源码」》
《 使用 API 访问摄像头自拍》
《手把手教你前端代码如何做错误上报「JS篇」》
《一文让你彻底搞懂移动前端和Web 前端区别在哪里》
《63个 正则大礼包「值得收藏」》
《提高你的 技能10 个问答题》
《图表库的5个首选》
《一文彻底搞懂 中.与.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的 js：动态图演示 & Async/Await 的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线 PDF 预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》
《 20 年 中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的 5 个区别》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 》
《「前端篇」不再为正则烦恼》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《深入细品浏览器原理「流程图」》
《 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的数组技巧「值得收藏」》
《前端必备基础知识：. 详解》
《不要再依赖了》
《犀牛书作者：最该忘记的特性》
《36个工作中常用的函数片段「值得收藏」》
《Node + H5 实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的 模块化方案和工具》
《「前端进阶」JS中的内存管理》
《正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道 面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生代码片段知识点详细汇总【实践】》
《关于前端174道 知识点汇总（一）》
《关于前端174道 知识点汇总（二）》
《关于前端174道 知识点汇总（三）》
《几个非常有意思的知识点总结【实践】》
《都2020年了，你还不会 装饰器？》
《实现图片合成下载》
《70个知识点详细总结（上）【实践】》
《70个知识点详细总结（下）【实践】》
《开源了一个 版敏感词过滤库》
《送你 43 道 面试题》
《3个很棒的小众库，你值得拥有》
《手把手教你深入巩固知识体系【思维导图】》
《推荐7个很棒的产品步骤引导库》
《Echa哥教你彻底弄懂 执行机制》
《一个合格的中级前端工程师需要掌握的 28 个 技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《 工具函数大全【新】》
《从中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(，Regex)》
《浏览器中实现计时器的4种创新方式》
《Three.js 动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解 js 深拷贝 vs 浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS 异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS 经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的 JS 写得更漂亮》
《恭喜你获得治疗JS this的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于 作用域的 5 个坑》
《插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《+实现自定义画板》
《 在 JS 中的应用「前端篇」》