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实现“扫码阅读”功能
Jan 21 Javascript
JS定义类的六种方式详解
May 12 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
vue模板语法-插值详解
Mar 06 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
Vue 全局loading组件实例详解
May 29 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
javascript 写类方式之七
2009/07/05 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
小程序实现搜索框
2020/06/19 Javascript
Python re模块介绍
2014/11/30 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
社区创先争优承诺书
2014/08/30 职场文书
检讨书范文2000字
2015/01/28 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python
JavaScript中reduce()的用法
2022/05/11 Javascript
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle