JavaScript运行机制实例分析


Posted in Javascript onApril 11, 2020

本文实例讲述了JavaScript运行机制。分享给大家供大家参考,具体如下:

第一次写博客

目前研一第二学期,大二开始入门前端,然而长久以来都是对于框架的简单调用,并未对其进行深入研究,因此,这个博客是作为自我督促的开始。这篇博客的内容源于前段时间写一个微信小程序前端,发现页面的渲染顺序总与自己的预想相违背,因此近期看了一些关于JavaScript运行机制的博客及文档,有了一些基本的框架,接下来就来详细看一下我所了解到的内容。

JavaScript执行顺序

首先,JavaScript是按照顺序,一行一行执行的,且JS只有一条线程,即不可能进行两条代码同时执行,也就是说,在一条代码执行时,它后面的所有代码都需要等待,直到该代码执行结束,后面的才能继续执行。如果是这样,就会导致用户体验度极其不好,例如一个请求发送给服务器,后续代码就会一直等待,直到服务器返回结果,用户才能进行新的操作。

这又是怎么回事呢?

详细解释JavaScript执行机制

JavaScript执行栈

JavaScript是以压栈的方式进行代码的执行的,一开始执行时栈内为空,当执行开始,JS引擎会将代码放入栈底,若该代码包含其他函数的调用,则将被调用的函数放在栈顶,若该代码未包含其他函数的调用,则执行该函数,执行完成后出栈,以此类推,最终直到栈为空。

JavaScript的同步任务和异步任务

事实上,真正的JS内部分为同步任务和异步任务,然而这并没有改变JS单线程的特征。

  • 同步任务:执行后直接返回结果,例:console.log();c = a + b
  • 异步任务:执行后无法立刻返回结果,需要等待一定时间,才能执行回调函数,对返回结果进行操作

系统来说,JS存在一个主线程,它会首先执行所有同步任务,而异步任务都会先进行注册,然后主线程不会等待异步任务执行结果的返回,而是继续执行下面的同步任务(在此过程中,如果异步任务返回结果,接下来的回调函数会放在Event Queue中等待),直到同步任务全部执行完毕,主线程就会从Event Queue读取任务进行执行。该过程会不断循环,即事件循环Event Loop。

事件循环是如何发生的

不觉得奇怪吗,如果按照上述同步任务和异步任务的执行方式,那不是一轮就可以执行完毕吗,又何来的Event Loop?

这是个小细节,异步任务存在多个时,每一个异步任务返回的结果所需的时间都是不同的,这就存在Event Queue以先进先出的形式将返回结果进行排队,第一个异步任务返回结果,那么就将其放在队列的首位,接下来的异步任务紧随其后,就这样排成一队。当主线程空闲时(即同步任务执行完毕后),便从Event Queue中读取事件,放入主线程执行。而循环来自于,当Event Queue执行完毕后,过了一段时间,又有之前的异步任务返回结果,放到Event Queue中,监控器检测到Event Queue为非空,主线程又开始执行Event Queue中的任务。

宏任务和微任务

在解释定义之前,我们先对异步任务进行说明:

  1. 对服务器的异步请求:最常见的异步任务,这涉及前后端的交互,需要服务器对请求进行处理,并返回请求结果
  2. setTimeout和setInterval:延时操作,后者为循环操作(都涉及延时值)
  3. Promise:JS用来处理异步操作的对象
  4. process.nextTick(callback):类似node.js版的"setTimeout",在事件循环的下一次循环中调用 callback 回调函数。

广义上JS分为同步任务和异步任务,在此对任务进行更精细的定义:

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

在此,之所以提出宏任务和微任务,是为了更好的理解事件循环!

执行过程:

  • 主线程会按顺序先执行第一次循环的宏任务,然后将第一次循环遇到的微任务放入微任务的Event Queue中,将遇到的宏任务放入宏任务Event Queue中,在此特别注意!!第一次循环的宏任务是整体script代码!!;
  • 然后后执行微任务的Event Queue;
  • 第二次循环时,会从宏任务的Event Queue中取出第一个宏任务,然后执行当前宏任务中包含的代码,同样将遇到的微任务放入微任务的Event Queue中,将遇到的宏任务放入宏任务Event Queue中;
  • 再执行当前微任务的Event Queue中的任务;
  • 第三次循环,从宏任务的Event Queue中取出第二个宏任务…(以此循环)

简而言之,就是先执行宏任务,再执行微任务,特别注意两点即可:

  1. 第一次循环的宏任务是整体script代码
  2. 宏任务队列是一次循环执行一条宏任务

这里看个例子:

console.log('1');
 
 setTimeout(function() {
  console.log('2');
  process.nextTick(function() {
   console.log('3');
  })
  new Promise(function(resolve) {
   console.log('4');
   resolve();
  }).then(function() {
   console.log('5')
  })
 })
 process.nextTick(function() {
  console.log('6');
 })
 new Promise(function(resolve) {
  console.log('7');
  resolve();
 }).then(function() {
  console.log('8')
 })
 
 setTimeout(function() {
  console.log('9');
  process.nextTick(function() {
   console.log('10');
  })
  new Promise(function(resolve) {
   console.log('11');
   resolve();
  }).then(function() {
   console.log('12')
  })
 })
 
 //作者:ssssyoki
 //链接:https://juejin.im/post/59e85eebf265da430d571f89
 //来源:掘金

输出顺序为:

1,7,6,8,2,4,3,5,9,11,10,12

总结

在此博客中,或许包含一些你未曾听过的名词或方法,我并未对其进行详细解释。之所以如此,是由于,于我个人,在看一些资料时,经常遇到不懂的东西,我会选择自己进行查阅和理解,这样更有效于记忆和通透的理解,就跟查单词是一样的,如果文本里直接告诉你,反而不会重视。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
javascript中caller和callee详解
Aug 10 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 #Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 #Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 #Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 #Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 #Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 #Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 #Javascript
You might like
PHP动态图像的创建
2006/10/09 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JS简单计算器实例
2015/01/20 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
python文件与目录操作实例详解
2016/02/22 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
旗帜观后感
2015/06/08 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书