用几道面试题来看JavaScript执行机制


Posted in Javascript onApril 30, 2021

前面的话

根据JavaScript的运行环境,锁定它为单线程,任务需要排队执行,如果网站资源比较大,这样会导致浏览器加载会很慢,但实际上并没有,大家肯定立刻想到了同步和异步。

所谓的同步和异步也是在排队,只是排队的地方不同。

同步和异步

同步任务进入主线程排队,异步任务进入事件队列中排队

同步任务和异步任务进入到不同的队列中,也就是上面讲的在不同地方排队。

同步任务进入主线程,异步任务进入事件队列,主线程任务执行完毕,事件队列中有等待执行的任务进入主线程执行,直到事件队列中任务全部执行完毕。

开胃菜

console.log('a')

setTimeout(function(){
    console.log('b')
}, 200)

setTimeout(function(){
    console.log('c')
}, 0)

console.log('d')

a d c b

从上到下,该进入主线程的进入主线程,该进入事件队列的进入事件队列。

那么主线程中存在console.log('a')和console.log('d'),定时器setTimeout延迟一段时间执行,顾名思义异步任务进入事件队列中,等待主线程任务执行完毕,再进入主线程执行。

定时器的延迟时间为0并不是立刻执行,只是代表相比于其他定时器更早的进入主线程中执行。

加一盘

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i)
    }, 1000)
}

结果:十个10

每次for循环遇到setTimeout将其放入事件队列中等待执行,直到全部循环结束,i作为全局变量当循环结束后i = 10,再来执行setTimeout时i的值已经为10, 结果为十个10。

将var改为let,变量作用域不同,let作用在当前循环中,所以进入事件队列的定时器每次的i不同,最后打印结果会是 0 1 2...9。

宏任务 微任务

除了经常说的同步任务和异步任务之外,更可分为宏任务,微任务

主要宏任务:整段脚本scriptsetTimeoutsetTimeout...

主要微任务:promise.then...

执行流程:

1.整段脚本script作为宏任务开始执行

2.遇到微任务将其推入微任务队列,宏任务推入宏任务队列

3.宏任务执行完毕,检查有没有可执行的微任务

4.发现有可执行的微任务,将所有微任务执行完毕

5.开始新的宏任务,反复如此直到所有任务执行完毕

来一盘Promise

const p = new Promise(resolve => {
    console.log('a')
    resolve()
    console.log('b')
})

p.then(() => {
    console.log('c')
})

console.log('d')

结果:a b d c

1.整段script进入宏任务队列开始执行

2.promise创建立即执行,打印ab

3.遇到promise.then进入微任务队列

4.遇到console.log('d')打印d

5.整段代码作为宏任务执行完毕,有可执行的微任务,开始执行微任务,打印c。

setTimeout(function(){
    console.log('setTimeout')
}, 0)

const p = new Promise(resolve => {
    console.log('a')
    resolve()
    console.log('b')
})

p.then(() => {
    console.log('c')
})

console.log('d')

结果:a b d c setTimeout

1.setTimeout进入宏任务队列

2.promise创建立即执行,打印ab

3.遇到promise.then进入微任务队列

4.遇到console.log('d')打印d

5.有可执行的微任务,打印c

6.微任务执行完毕,开始执行新的宏任务,setTimeout开始执行,打印setTimeout

setTimeout(function(){
    console.log('setTimeout')
}, 0)

const p = new Promise(resolve => {
    console.log('a')
    resolve()
    console.log('b')
})

p.then(() => {
    console.log('c')
    setTimeout(function(){
        console.log('then中的setTimeout')
    }, 0)
})

console.log('d')

结果:a b d c setTimeout then中的setTimeout

1.同上

2.执行微任务打印c,遇到setTimeout将其推入宏任务队列中

3.定时器延迟时间相同,开始按照顺序执行宏任务,分别打印setTimeoutthen中的setTimeout

再加点定时器

console.log('a');

new Promise(resolve => {
    console.log('b')
    resolve()
}).then(() => {
    console.log('c')
    setTimeout(() => {
      console.log('d')
    }, 0)
})

setTimeout(() => {
    console.log('e')
    new Promise(resolve => {
        console.log('f')
        resolve()
    }).then(() => {
        console.log('g')
    })
}, 100)

setTimeout(() => {
    console.log('h')
    new Promise(resolve => {
        resolve()
    }).then(() => {
        console.log('i')
    })
    console.log('j')
}, 0)

结果:a b c h j i d e f g

1.打印a

2.promise立即执行,打印b

3.promise.then推入微任务队列

4.setTimeout推入宏任务队列

5.整段代码执行完毕,开始执行微任务,打印c,遇到setTimeout推入宏任务队列排队等待执行

6.没有可执行的微任务开始执行宏任务,定时器按照延迟时间排队执行

7.打印h j,promise.then推入微任务队列有

8.可执行的微任务,打印i,继续执行宏任务,打印d

9.执行延迟为100的宏任务,打印e f,执行微任务打印g,所有任务执行完毕

简单测试

console.log('start')

a().then(() => {
  console.log('a_then')
})

console.log('end')

function a() {
  console.log('a_function')
  return b().then((res) => {
    console.log('res', res)
    console.log('b_then')
    return Promise.resolve('a方法的返回值')
  })
}

function b() {
  console.log('b_function')
  return Promise.resolve('返回值')
}

结果:start a_function b_function end res 返回值 b_then a_then

根据上面例子的流程讲解来思考这个,加深理解

总结

  • JavaScript单线程,任务需要排队执行
  • 同步任务进入主线程排队,异步任务进入事件队列排队等待被推入主线程执
  • 行定时器的延迟时间为0并不是立刻执行,只是代表相比于其他定时器更早的被执行
  • 以宏任务和微任务进一步理解js执行机制
  • 整段代码作为宏任务开始执行,执行过程中宏任务和微任务进入相应的队列中
  • 整段代码执行结束,看微任务队列中是否有任务等待执行,如果有则执行所有的微任务,直到微任务队列中的任务执行完毕,如果没有则继续
  • 执行新的宏任务执行新的宏任务,凡是在执行宏任务过程中遇到微任务都将其推入微任务队列中执行
  • 反复如此直到所有任务全部执行完毕

以上就是用几道面试题来看JavaScript执行机制的详细内容,更多关于JavaScript执行机制的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 #Javascript
浅谈node.js中间件有哪些类型
Apr 29 #Javascript
JavaScript实现简单图片切换
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
You might like
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
js对字符的验证方法汇总
2015/02/04 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Python构造函数及解构函数介绍
2015/02/26 Python
python数据结构之链表详解
2017/09/12 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python config文件的读写操作示例
2019/09/27 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
2014年自我评价
2014/01/04 职场文书
新三好学生主要事迹
2014/01/23 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
第一军规观后感
2015/06/12 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL