前端进阶系列(八):JS执行机制

JackJiang 发布于2019-08-23 12:25 / 3318人阅读

摘要：一直以来，对的执行机制都是模棱两可，知道今天看了文章这一次，彻底弄懂执行机制和的规范和实现，才对的执行机制有了深入的理解，下面是我的学习总结。个要点是单线程语言是的执行机制，为了实现主线程的不阻塞，就这么诞生了。

一直以来，对JS的执行机制都是模棱两可，知道今天看了文章—《这一次，彻底弄懂JavaScript执行机制》和《Event Loop的规范和实现》，才对JS的执行机制有了深入的理解，下面是我的学习总结。

2个要点

JS是单线程语言

Event Loop是JS的执行机制，为了实现主线程的不阻塞，Event Loop就这么诞生了。

2个概念(结合Browser环境和Node环境)

task queue(宏任务队列)：setTimeout、setInterval、setImmediate、I/O、UI交互事件

microtask queue(微任务队列)：Promise、process.nextTick、MutaionObserver

看下图：

queue可以看成一种数据结构，用以存储需要执行的函数

setTimeout等API注册的函数，会进入task队列

Promise等API注册的函数会进入microtask队列

Event Loop执行一次，从task队列中拉出一个task执行

Event Loop继续检查microtask队列是否为空，依次执行直至清空队列

情景再现

JS的执行逻辑，就好比只有一个窗口的银行，客户需要一个一个排队办理业务，假如现在排队的有两个人，第一个人是办理银行卡的，第二个人是取钱的，下面来个情景对话(这就类似上图的event loop)：
客服：请问您办理什么业务？
客户1：办理银行卡。
客服：请先填写一份申请表。下一位！(此时客户1进入callback queue)
客服：请问您办理什么业务？
客户2：取钱
…………
(此时客户1已经完成申请表填写，但客户2还未结束，那么客户1还需等待，直到窗口前的这个客户办理结束)
客户1：我填好了，给您……

## 实例练习1

console.log(1)

setTimeout(() => {
    console.log(2)
    new Promise(resolve => {
        console.log(4)
        resolve()
    }).then(() => {
        console.log(5)
    })
})

new Promise(resolve => {
    console.log(7)
    resolve()
}).then(() => {
    console.log(8)
})

setTimeout(() => {
    console.log(9)
    new Promise(resolve => {
        console.log(11)
        resolve()
    }).then(() => {
        console.log(12)
    })
})

分解动作：

主进程运行的代码首先输出1、7；

再执行一次microtask输出8；

执行了一次task输出2，4；

再执行一次microtask输出5；

再执行另一个task输出9、11；

再执行一次microtask输出12

最终结果：
1、7、8、2、4、5、9、11、12

注意的：在Node环境下process.nextTick注册的函数优先级高于Promise,大家可以在Node环境下尝试下面的例子：

new Promise(resolve => {
    console.log(1)
    resolve()
}).then(() => {
    console.log(2)
})
new Promise(resolve => {
    console.log(3)
    resolve()
}).then(() => {
    console.log(4)
})
process.nextTick(() => {
    console.log(5)
})

console.log(6)

执行结果：1、3、6、5、2、4

实例练习2

setTimeout(() => {
    console.log(2)
}, 2)

setTimeout(() => {
    console.log(1)
}, 1)

setTimeout(() => {
    console.log(0)
}, 0)

有人说结果应该是0，1，2
但正确结果是2，1，0。
因为setTimeout最低延迟是4ms，值得注意。

我的博客：http://blog.rnode.me

参考文章：

原文：Event Loop的规范和实现
地址：https://juejin.im/post/5a6155126fb9a01cb64edb45
原文：这一次，彻底弄懂 JavaScript 执行机制
地址：https://juejin.im/post/59e85eebf265da430d571f89
原文：JavaScript 运行机制详解：再谈Event Loop
地址：http://www.ruanyifeng.com/blog/2014/10/event-loop.html

云服务器 GPU云服务器 js执行机制执行机制 php执行的机制原理 js进阶视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98478.html

前端基础进阶目录

摘要：不过其实简书文章评论里有很多大家的问题以及解答，对于进一步理解文中知识帮助很大的，算是有点可惜吧。不过也希望能够对正在学习前端的你有一些小帮助。如果在阅读中发现了一些错误，请在评论里告诉我，我会及时更改。前端基础进阶（一）：内存空间详细图解前端基础进阶（二）：执行上下文详细图解前端基础进阶（三）：变量对象详解前端基础进阶（四）：详细图解作用域链与闭包前端基础进阶（五）：全方位...

mo0n1andin 2019-08-21 18:30 评论0 收藏0
【进阶3-3期】深度解析 call 和 apply 原理、使用场景及实现

摘要：之前文章详细介绍了的使用，不了解的查看进阶期。不同的引擎有不同的限制，核心限制在，有些引擎会抛出异常，有些不抛出异常但丢失多余参数。存储的对象能动态增多和减少，并且可以存储任何值。这边采用方法来实现，拼成一个函数。之前文章详细介绍了 this 的使用，不了解的查看【进阶3-1期】。 call() 和 apply() call() 方法调用一个函数, 其具有一个指定的 this 值和分...

godlong_X 2019-08-23 14:31 评论0 收藏0
【进阶3-5期】深度解析 new 原理及模拟实现

摘要：使用指定的参数调用构造函数，并将绑定到新创建的对象。由构造函数返回的对象就是表达式的结果。情况返回以外的基本类型实例中只能访问到构造函数中的属性，和情况完全相反，结果相当于没有返回值。定义 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 ——（来自于MDN）举个栗子 function Car(color) { this.color = co...

Baaaan 2019-08-23 14:31 评论0 收藏0
前端基础进阶（一）：内存空间详细图解

摘要：一栈数据结构与不同，中并没有严格意义上区分栈内存与堆内存。引用数据类型的值是保存在堆内存中的对象。不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。为了更好的搞懂变量对象与堆内存，我们可以结合以下例子与图解进行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 评论0 收藏0
前端必知必会HTTP请求系列（三）HTTP报文内的http信息

摘要：报文用于协议交互的信息被称为报文。现在出现的各种首部字段及状态码稍后会阐述。状态码响应报文包含了多个范围的内容使用。如果服务器无法响应范围请求，则会返回状态码和完整的实体内容。 showImg(https://segmentfault.com/img/bVbthNL?w=900&h=500); http报文用于HTTP协议交互的信息被称为HTTP报文。请求端的http报文叫做请求报文...

Invoker 2019-08-23 17:51 评论0 收藏0