javascript的组成及每部分的作用（图文细说JavaScript的运行机制）

作者： 卡特

转发链接：https://mp.weixin.qq.com/s/7g6hajYAvPBUQvGnPR3aag

前一段小编也详细讲过关于JavaScript 的运行机制：「硬核JS」一次搞懂JS运行机制，纯文字化的理论，对于初学者来说很难去理解它。这次小编一起重温并且图形化 案例细说。

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 setTimeout

---

2. JavaScript中的同步异步

js的同步异步是如何实现的?js中包含诸多创建异步的函数如:seTimeout，setInterval，dom事件，ajax，Promise，process.nextTick等函数

1. 因为单线程，所以代码自上而下执行，所有代码被放到执行栈中执行；
2. 遇到异步函数将回调函数添加到一个任务队列里面；
3. 当执行栈中的代码执行完以后，会去循环任务队列里的函数;
4. 将任务队列里的函数放到执行栈中执行;
5. 如此往复，称为事件循环;

• 这样分析，上一段的代码就得到了合理的解释；
• 再来看一下这段代码；

function fn() { setTimeout(()=>{ console.log('a'); },0); new Promise((resolve)=>{ console.log('b'); resolve(); }).then(()=>{ console.log('c') }); } fn() // b c a

3. 宏任务和微任务

两任务在同步异步中处于什么地位？两个任务分别处于任务队列中的宏队列与微队列中;宏队列与微队列组成了任务队列;任务队列将任务放入执行栈中执行

宏任务：

宏队列，macrotask，也叫tasks。异步任务的回调会依次进入macro task queue，等待后续被调用，这些异步任务包括：

• setTimeout
• setInterval
• setImmediate (Node独有)
• requestAnimationFrame (浏览器独有)
• I/O
• UI rendering (浏览器独有)

微任务：

微队列，microtask，也叫jobs。异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包括：

• process.nextTick (Node独有)
• Promise
• Object.observe
• MutationObserver

执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）；

全局Script代码执行完毕后，执行栈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(); //

流程重现

1. 执行函数同步语句；

• step1console.log(1);执行栈：[ console ]宏任务：[]微任务：[]打印结果：1
• step2setTimeout(() => {// 这个回调函数叫做callback1，setTimeout属于宏任务，所以放到宏队列中console.log(2);Promise.resolve().then(() => {console.log(3)});});执行栈：[ setTimeout ]宏任务：[ callback1 ]微任务：[]打印结果：1
• step3new Promise((resolve, reject) => {// 注意，这里是同步执行的console.log(4);resolve(5)}).then((data) => {// 这个回调函数叫做callback2，promise属于微任务，所以放到微队列中console.log(data);});执行栈：[ promise ]宏任务：[ callback1 ]微任务：[ callback2 ]打印结果：14
• step4setTimeout(() => {// 这个回调函数叫做callback3，setTimeout属于宏任务，所以放到宏队列中console.log(6);})执行栈：[ setTimeout ]宏任务：[ callback1 , callback3 ]微任务：[ callback2 ]打印结果：14
• step5console.log(7)执行栈：[ console ]宏任务：[ callback1 , callback3 ]微任务：[ callback2 ]打印结果：147

2. 同步语句执行完毕，从微队列中依次取出任务执行，直到微队列为空

• step6console.log(data) // 这里data是Promise的成功参数为5执行栈：[ callback2 ]宏任务：[ callback1 , callback3 ]微任务：[]打印结果：1475

3. 这里微队列中只有一个任务，执行完后开始从宏队列中取任务执行

• step7console.log(2);执行栈：[ callback1 ]宏任务：[ callback3 ]微任务：[]打印结果：14752但是执行callback1的时候遇到另一个Promise,Promise异步执行完毕以后在微队列中又注册了一个callback4函数
• step8Promise.resolve().then(() => {// 这个回调函数叫做callback4，promise属于微任务，所以放到微队列中console.log(3);});执行栈：[ Promise ]宏任务：[ callback3 ]微任务：[ callback4 ]打印结果：14752

4. 取出一个宏任务macrotask执行完毕，然后再去微任务队列microtask queue中依次取出执行

• step9console.log(3)执行栈：[ callback4 ]宏任务：[ callback3 ]微任务：[]打印结果：147523

5. 微队列全部执行完，再去宏队列中取第一个任务执行

• step10console.log(3)执行栈：[ callback3 ]宏任务：[]微任务：[]打印结果：1475236

6. 以上全部执行完毕，执行栈，宏队列，微队列均为空执行栈：[]宏任务：[]微任务：[]打印结果：1475236

• 再来一段复杂代码

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. NodeJS中的事件循环

NodeJS中的宏任务和微任务

NodeJS的Event Loop中，执行宏队列的回调任务有6个阶段，如下图：

各个阶段执行的任务如下：

• timers阶段：这个阶段执行setTimeout和setInterval预定的callback
• I/O callback阶段：执行除了close事件的callbacks、被timers设定的callbacks、setImmediate()设定的callbacks这些之外的callbacks idle, prepare阶段：仅node内部使用
• poll阶段：获取新的I/O事件，适当的条件下node将阻塞在这里
• check阶段：执行setImmediate()设定的callbacks
• close callbacks阶段：执行socket.on('close', ....)这些callbacks

NodeJS的宏队列：

• Timers Queue
• IO Callbacks Queue
• Check Queue
• Close Callbacks Queue

这4个都属于宏队列，但是在浏览器中，可以认为只有一个宏队列，所有的宏任务都会被加到这一个宏队列中，但是在NodeJS中，不同的宏任务会被放置在不同的宏队列中

NodeJS的微队列：

• Next Tick Queue：是放置process.nextTick(callback)的回调任务的
• Other Micro Queue：放置其他微任务，比如Promise等

在浏览器中，也可以认为只有一个微队列，所有的微任务都会被加到这一个微队列中，但是在NodeJS中，不同的微任务会被放置在不同的微队列中

NodeJS中的事件循环过程

1. 执行全局的同步代码；
2. 执行微任务先执行next tick queue所有任务，再执行other micro tasks queue中的所有任务；
3. 开始执行宏任务，共6个阶段，从第1个阶段开始执行相应每一个阶段宏队列中的所有任务，注意，这里是所有每个阶段宏任务队列的所有任务，在浏览器的Event Loop中是只取宏队列的第一个任务出来执行，每一个阶段的宏任务执行完毕后，开始执行微任务，回到步骤2；

Timers Queue -> 步骤2 ->I/O Queue -> 步骤2 ->Check Queue -> 步骤2 ->Close Callback Queue -> 步骤2 ->Timers 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 222

PS：版本不同导致运行结果不同

总结：

• 浏览器的Event Loop和NodeJS的Event Loop是不同的，实现机制也不一样，不要混为一谈。
• NodeJS可以理解成有4个宏任务队列和2个微任务队列，但是执行宏任务时有6个阶段。先执行全局Script代码，执行完同步代码调用栈清空后，先从微任务队列Next Tick Queue中依次取出所有的任务放入调用栈中执行，再从微任务队列Other Microtask Queue中依次取出所有的任务放入调用栈中执行。然后开始宏任务的6个阶段，每个阶段都将该宏任务队列中的所有任务都取出来执行（注意，这里和浏览器不一样，浏览器只取一个），每个宏任务阶段执行完毕后，开始执行微任务，再开始执行下一阶段宏任务，以此构成事件循环。
• MacroTask包括：setTimeout、setInterval、 setImmediate(Node)、requestAnimation(浏览器)、IO、UI rendering。
• Microtask包括：process.nextTick(Node)、Promise、Object.observe、MutationObserver。
• v11以前 是上面说的那样；v11以后将Node环境的事件循环和浏览器的统一了。
• process.nextTick 上限是1000？
• 写一个休眠函数 达到阻塞目的

练习：

1. 宏任务执行顺序；
2. 微任务执行顺序；
3. 宏任务微任务结合执行顺序；

推荐JavaScript经典实例学习资料文章

《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》

《推荐Web程序员常用的15个源代码编辑器》

《10个实用的JS技巧「值得收藏」》

《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》

《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》

《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》

《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》

《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》

《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》

《深入JavaScript教你内存泄漏如何防范》

《手把手教你7个有趣的JavaScript 项目-上「附源码」》

《手把手教你7个有趣的JavaScript 项目-下「附源码」》

《JavaScript 使用 mediaDevices API 访问摄像头自拍》

《手把手教你前端代码如何做错误上报「JS篇」》

《一文让你彻底搞懂移动前端和Web 前端区别在哪里》

《63个JavaScript 正则大礼包「值得收藏」》

《提高你的 JavaScript 技能10 个问答题》

《JavaScript图表库的5个首选》

《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》

《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》

《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》

《可视化的 js：动态图演示 Promises & Async/Await 的过程》

《原生JS封装拖动验证滑块你会吗？「实践」》

《如何实现高性能的在线 PDF 预览》

《细说使用字体库加密数据-仿58同城》

《Node.js要完了吗？》

《Pug 3.0.0正式发布，不再支持 Node.js 6/8》

《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》

《JavaScript 20 年 中文版之创立标准》

《值得收藏的前端常用60余种工具方法「JS篇」》

《箭头函数和常规函数之间的 5 个区别》

《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》

《「前端篇」不再为正则烦恼》

《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》

《深入细品浏览器原理「流程图」》

《JavaScript 已进入第三个时代，未来将何去何从？》

《前端上传前预览文件 image、text、json、video、audio「实践」》

《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》

《推荐13个有用的JavaScript数组技巧「值得收藏」》

《前端必备基础知识：window.location 详解》

《不要再依赖CommonJS了》

《犀牛书作者：最该忘记的JavaScript特性》

《36个工作中常用的JavaScript函数片段「值得收藏」》

《Node H5 实现大文件分片上传、断点续传》

《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》

《【实践总结】关于小程序挣脱枷锁实现批量上传》

《手把手教你前端的各种文件上传攻略和大文件断点续传》

《字节跳动面试官：请你实现一个大文件上传和断点续传》

《谈谈前端关于文件上传下载那些事【实践】》

《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》

《最全的 JavaScript 模块化方案和工具》

《「前端进阶」JS中的内存管理》

《JavaScript正则深入以及10个非常有意思的正则实战》

《前端面试者经常忽视的一道JavaScript 面试题》

《一行JS代码实现一个简单的模板字符串替换「实践」》

《JS代码是如何被压缩的「前端高级进阶」》

《前端开发规范：命名规范、html规范、css规范、js规范》

《【规范篇】前端团队代码规范最佳实践》

《100个原生JavaScript代码片段知识点详细汇总【实践】》

《关于前端174道 JavaScript知识点汇总（一）》

《关于前端174道 JavaScript知识点汇总（二）》

《关于前端174道 JavaScript知识点汇总（三）》

《几个非常有意思的javascript知识点总结【实践】》

《都2020年了，你还不会JavaScript 装饰器？》

《JavaScript实现图片合成下载》

《70个JavaScript知识点详细总结（上）【实践】》

《70个JavaScript知识点详细总结（下）【实践】》

《开源了一个 JavaScript 版敏感词过滤库》

《送你 43 道 JavaScript 面试题》

《3个很棒的小众JavaScript库，你值得拥有》

《手把手教你深入巩固JavaScript知识体系【思维导图】》

《推荐7个很棒的JavaScript产品步骤引导库》

《Echa哥教你彻底弄懂 JavaScript 执行机制》

《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》

《深入解析高频项目中运用到的知识点汇总【JS篇】》

《JavaScript 工具函数大全【新】》

《从JavaScript中看设计模式(总结)》

《身份证号码的正则表达式及验证详解(JavaScript，Regex)》

《浏览器中实现JavaScript计时器的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的详细药方》

《谈谈前端关于文件上传下载那些事【实践】》

《面试中教你绕过关于 JavaScript 作用域的 5 个坑》

《Jquery插件（常用的插件库）》

《【JS】如何防止重复发送ajax请求》

《JavaScript Canvas实现自定义画板》

《Continuation 在 JS 中的应用「前端篇」》

作者： 卡特

转发链接：https://mp.weixin.qq.com/s/7g6hajYAvPBUQvGnPR3aag

,