浏览器执行机制探究，图解最直观

pingink 发布于2019-08-23 13:40 / 1049人阅读

摘要：同时在秒计时完成后把事件表的匿名函数推入到回调队列里面。上图中，执行栈执行匿名函数，我们在控制台能看到打印的信息。我们现在看到执行栈中，是后于匿名函数进入栈的，所以栈弹出已经执行的函数的顺序是先弹出，然后再弹出匿名函数。

做了这么久前端，自己一直很想深入去了解了解这些玩意儿，奈何天天扑在项目上，基本没有闲余时间去想去做

面试的时候大家应该也会被问到一些浏览器执行机制的问题，我最近也去研究了一下，分享一点自己的心得。

由于segmentfault的限制原因，这儿大图放不上来，大家看图片的时候需要点击图片下方的"查看原图"才能看清除里面写的内容

写得不好，或者有意见的直接喷，不用走流程。也欢迎大佬指点

用图片的执行流程来解释一下，有图有真相

这儿加一个知识点：

栈：一种数据结构，具有的特点：先进后出(FILO—First-In/Last-Out)
队列：也是一种数据结构，具有的特点：先进先出（FIFO—first in first out）

先来一张图（ps：有没有跟我同款的输入法主题的，握个抓爪，哈哈）：

图上我们能看到我们能经常听到的几个关于浏览器执行过程的词语：

栈：顺序存放我们要执行代码
事件表：存放我们将要执行的事件（我觉得可以理解为在某些条件下执行的事件），例如图上的setTimeout内部的匿名函数、click事件（图上anonymous是匿名的意思，估计有童鞋不知道，写这儿了）
回调队列：这个应该很熟悉了，就是我们定义执行的回调函数组成的队列

然后我们一步一步来解析这个玩意儿：

开始执行我们写的这个非常非常非常简单的js代码

我们能看到栈里面存上我们要执行的console，这儿第一部没有别的代码执行，开始执行下面的代码，狗昂！！！

然后就是执行我们这个setTimeout函数，如上图所示，同样的先被推入执行栈，我们在定时函数里面整了个匿名函数，继续看

如上图，咱们这儿的匿名函数进入了事件表内，然后过1000ms会进入回调队列里面，继续看

跟上面一样，顺序执行这个console，然后把咱们在setTimeout内定义的函数放到了回调队列中，等待执行栈空闲了就会执行，继续看

上面的图还是按照咱们熟知的顺序执行，把最后写的那个绑定的click事件放入事件表，等待咱们去点击那个button按钮触发click事件。同时在1秒计时完成后把事件表的匿名函数推入到回调队列里面。狗昂！！

上图能看到，click事件在事件表了，咱们顺序执行的代码已经完成，然后执行栈空闲了，开始执行咱们回调队列的函数。继续看

上图中，回调队列的函数被推到空闲的执行栈中去执行。

上图中，执行栈执行匿名函数，我们在控制台能看到打印的console信息。

这儿还有个小知识点，栈的特性是：先入后出，后入先出。我们现在看到执行栈中，console是后于匿名函数进入栈的，所以栈弹出已经执行的函数的顺序是先弹出console，然后再弹出匿名函数。继续看

上图中，等待执行栈空闲了，我们去点击button执行click事件。

写到这儿我估计有杠精要说为啥要等到执行栈空了再去点那个button按钮，笑哭啊！！！我曾经遇到过这样的一个童鞋，非要跟我杠。这儿说明一下，如果执行栈还有未执行完的函数，我们点那个按钮，click事件的回调函数会按数组push的方式跟在现在回调队列数组后，然后一个一个地再被unshift到我们的执行栈去执行。

上面三个图就跟前面执行匿名函数的流程一样的。

想给大家放一个完整执行的过程的gif好像没找到录制的工具，后续如果找到好用的工具我把图放上来

云服务器服务器托管执行机制 js执行机制 php执行的机制原理探究

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

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

图解 React Virtual DOM

摘要：判断是否是有效的元素。主要和同构相关。是真实的模拟，真实是由真实的元素构成，也是由虚拟的元素构成。当这些对象上的数据发生变化时，通过打把变化同步到真实的上去。原创新书移动前端高效开发实战已在亚马逊京东当当开售。作者：阿希（沪江Web前端开发工程师）本文原创，转载请注明作者及出处。了解 React 的人几乎都听过说 Virtual DOM，甚至不了解 React 的人也听过 Vi...

Soarkey 2019-08-20 19:02 评论0 收藏0
前端基础进阶（一）：内存空间详细图解

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

_Suqin 2019-08-21 18:30 评论0 收藏0
前端基础进阶（四）：详细图解作用域链与闭包

摘要：之前一篇文章我们详细说明了变量对象，而这里，我们将详细说明作用域链。而的作用域链，则同时包含了这三个变量对象，所以的执行上下文可如下表示。下图展示了闭包的作用域链。其中为当前的函数调用栈，为当前正在被执行的函数的作用域链，为当前的局部变量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初学JavaScrip...

aikin 2019-08-21 18:29 评论0 收藏0
【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

摘要：首次运行代码时，会创建一个全局执行上下文并到当前的执行栈中。执行上下文的创建执行上下文分两个阶段创建创建阶段执行阶段创建阶段确定的值，也被称为。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，，今天是第一天本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进...

import. 2019-08-23 13:46 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

spacewander 2019-08-21 17:42 评论0 收藏0