分享一篇可视化的JS引擎执行流程

   戳蓝字「TianTianUp」关注我们哦！

前言

这是一篇不错译文，我强烈推荐的原因在于:

在用动图的形式生动形象的讲述了JavaScript引擎基本原理。

图片制作并非本人，如有侵权，会删除。

接触了前端这么久以来，你每天跟JS打交道，你肯定也和我一样认为JavaScript很酷。但机器怎么能真正理解你写的代码呢？

由上面的思考点,才引出此文:

带你了解一下JavaScript引擎的基本原理，看看它是如何处理我们对人类友好的JS代码，并将其转化为机器所能理解的东西。

作为JavaScript的开发者，清楚明白它的过程，绝对是一件好事情。

基本概念

在这之前，我们得了解一些JS引擎的基础知识。

什么是JS引擎，它帮我们做了什么事情呢？

我们都知道，我们写得代码，经过处理，交给CPU，它是不认识的，无法去执行。而CPU认识的是自己的指令集，指令集对应的是汇编代码。我们不可能去编写这些指令集，于是乎，它出现了:

JavaScirpt引擎可以将JS代码编译为不同CPU(Intel, ARM以及MIPS等)对应的汇编代码，这样我们才不要去翻阅每个CPU的指令集手册。

当然了，编译代码不是它的唯一功能，比如代码的执行，分配内存，垃圾回收机制都是它工作的。

对它有了一个大致的认识，那我们常见的JS引擎有哪些呢？我发现，最知名的肯定是V8，至于一些其他的，感兴趣的可以去查一查资料，

比如还有:

• SpiderMonkey (Mozilla)

• JavaScriptCore (Apple)

• Chakra (Microsoft)

• IOT：duktape、JerryScript

V8的内容太多了，篇幅有限，后续再出一篇文章聊一聊。

太出名了，所以这篇文章介绍的知识主要基于 Node.js 和基于 Chromium 的浏览器所用的 V8 引擎。

主要流程图

细节很多，所以主要分析的是主要的流程，如图: