javascript的组成及每部分的作用(图文细说JavaScript的运行机制)(1)

作者: 卡特

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

前言

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

1. 单线程的JavaScript

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等函数

javascript的组成及每部分的作用(图文细说JavaScript的运行机制)(2)

  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

javascript的组成及每部分的作用(图文细说JavaScript的运行机制)(3)

执行全局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
  1. 同步语句执行完毕,从微队列中依次取出任务执行,直到微队列为空
  • step6console.log(data) // 这里data是Promise的成功参数为5执行栈:[ callback2 ]宏任务:[ callback1 , callback3 ]微任务:[]打印结果:1475
  1. 这里微队列中只有一个任务,执行完后开始从宏队列中取任务执行
  • step7console.log(2);执行栈:[ callback1 ]宏任务:[ callback3 ]微任务:[]打印结果:14752但是执行callback1的时候遇到另一个Promise,Promise异步执行完毕以后在微队列中又注册了一个callback4函数
  • step8Promise.resolve().then(() => {// 这个回调函数叫做callback4,promise属于微任务,所以放到微队列中console.log(3);});执行栈:[ Promise ]宏任务:[ callback3 ]微任务:[ callback4 ]打印结果:14752
  1. 取出一个宏任务macrotask执行完毕,然后再去微任务队列microtask queue中依次取出执行
  • step9console.log(3)执行栈:[ callback4 ]宏任务:[ callback3 ]微任务:[]打印结果:147523
  1. 微队列全部执行完,再去宏队列中取第一个任务执行
  • step10console.log(3)执行栈:[ callback3 ]宏任务:[]微任务:[]打印结果:1475236
  1. 以上全部执行完毕,执行栈,宏队列,微队列均为空执行栈:[]宏任务:[]微任务:[]打印结果: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中的事件循环

javascript的组成及每部分的作用(图文细说JavaScript的运行机制)(4)

NodeJS中的宏任务和微任务

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

javascript的组成及每部分的作用(图文细说JavaScript的运行机制)(5)

各个阶段执行的任务如下:
  • 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中,不同的微任务会被放置在不同的微队列中

javascript的组成及每部分的作用(图文细说JavaScript的运行机制)(6)

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

  • 再看两张图

javascript的组成及每部分的作用(图文细说JavaScript的运行机制)(7)

  • 代码又来了

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

,