详解JavaScript执行模型


Posted in Javascript onNovember 16, 2020

JavaScript执行模型

引言

JavaScript是一个单线程(Single-threaded)异步(Asynchronous)非阻塞(Non-blocking)并发(Concurrent)语言,这些语言效果通过一个调用栈(Call Stack)、一个事件循环(Event Loop)、一个回调队列(Callback Queue)有些时候也叫任务队列(Task Queue)与跟运行环境相关的API组成。

概念

调用栈 Call Stack

调用栈是一个LIFO后进先出数据结构的函数运行栈,它内部的数据结构为函数帧。当在JavaScript中调用一个函数时,它将被压入栈中,当这个函数内部还有另一个函数被调用时,另一个函数将会被压入栈顶,直到其内部没有更多调用,栈顶函数将会被以单线程方式执行并出栈,直到最后一个函数帧出栈。JavaScript语言特性中的单线程就是指的调用栈的单线程运行。

function multiply(a, b) {
 return a * b;
}

function square(n) {
 return multiply(n, n)
}

function printSquare(n) {
 console.log(square(n));
}

printSquare(4);

首先调用栈压入main(),扫描到printSquare()函数调用调用栈压入printSquare(4)printSquare函数内部调用square(n)该函数被压入栈,同理multiply(n, n)函数也被压入栈且没有更多调用,JavaScript引擎开始执行栈顶函数multiply(n, n)返回结果并出栈,以此类推直到main()函数出栈。

调用栈有一个意外情况,当函数递归调用其自身时调用栈将溢出,执行环境将报错。

function foo() {
 foo();
}
foo();

任务队列 Task Queue

任务队列是WebAPI的一部分,也就是说它本身并不是ECMAScript标准的一部分,而是运行环境自行实现的。任务队列是所有回调函数排队执行的FIFO先进先出队列,它的单位是任务(Task),每个任务都关联着一个用于处理这个任务的回调函数。在事件循环(Event Loop)中会将任务队列内的函数压入调用栈执行并出队列,直至为空。

任务队列在浏览器的实现中被分为了宏任务队列(macrotask queue)和微任务队列(microtask queue),它们分别个自承载宏任务(macrotask)和微任务(microtask)的排队,其中宏任务队列与宏任务又被默认为常规的任务队列与任务。

当调用栈内所有调用都完成执行后,事件轮询会在每次处理宏任务队列的一个宏任务后处理微任务队列的全部微任务,也就是微任务基本会在宏任务处理之前被处理。微任务处理中间不会被UI或网络事件处理被执行,微任务执行是连续的。

会被添加到宏任务的方法的回调有:

  • script:script标签中的代码解析运行
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI rendering:UI渲染,每16.6ms放到队列上一次,60fps,如果调用栈被占用则会被阻塞

会被添加到微任务的Web API方法有:

会被添加到微任务的Web API方法有:

  • process.nextTick:Node提供的
  • Promise
  • Object.observe
  • MutationObserver

微任务只会从我们编写的代码中产生,宏任务既可能从我们编写的代码中产生也可能从浏览器本身事件、渲染、IO产生。

事件循环 Event Loop

事件循环是JavaScript的事件处理机制,它会一直轮询消息队列,当满足调用栈为空且消息队列不为空时,它将把消息队列队头的消息压入执行栈。这样的机制保证了函数不会被中断,不会有线程切换带来的数据不一致等情况

事件循环在调用栈为空时轮询,顺序为

1.找到任务队列(宏任务队列)的最早被添加的任务并将其添加到调用栈执行

2.执行所有微任务队列内的任务

  • 当微任务队列不为空时找到微任务队列最早被添加的任务并将其添加到调用栈执行

3.渲染所有变化
4.如果宏任务队列为空等待宏任务出现
5.返回步骤1

JavaScript运行时 Runtime

详解JavaScript执行模型

浏览器的JavaScript代码执行也就是调用栈与堆(用于储存变量对象等)由JavaScript引擎提供,用的比较多的是谷歌的V8引擎,Chrome、Edge浏览器、Nodejs均使用该引擎。

事件循环Event Loop、任务队列Task Queue(回调队列Callback Queue)、WebAPI或Node API由运行环境提供。

以上就是详解JavaScript执行模型的详细内容,更多关于JavaScript执行模型的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
Vue 实现拨打电话操作
Nov 16 #Javascript
微信小程序实现页面左右滑动
Nov 16 #Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 #Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 #Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 #Javascript
js实现纯前端压缩图片
Nov 16 #Javascript
Vue基于localStorage存储信息代码实例
Nov 16 #Javascript
You might like
PHP制作万年历
2015/01/07 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
validator验证控件使用代码
2010/11/23 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python实现自动清理重复文件
2020/08/24 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
拾金不昧表扬稿
2015/01/16 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript