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 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
canvas实现图像截取功能
Feb 06 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
通过vue写一个瀑布流插件代码实例
Sep 07 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学习之PHP变量
2006/10/09 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
python编写简单爬虫资料汇总
2016/03/22 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
小学数学国培感言
2014/03/10 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
写给医院的感谢信
2015/01/22 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
十七岁的单车观后感
2015/06/12 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL