作者：Kevin S
翻译：疯狂的技术宅
原文：https://alistapart.com/articl…
绑定到字节码
对于古代 Web 程序，浏览器首先看到的 JavaScript 通常不是前端程序员写的。相同，它很可能是由 webpack 之类的工具产生的捆绑包，而且可能是一个相当大的捆绑包，其中蕴含 UI 框架，例如 React，各种 polyfills（在较旧的浏览器中模仿新平台性能的库），以及在 npm 上找到的各种软件包。浏览器的 JavaScript 引擎面临的第一个挑战是将一大堆文本转换为能够在虚拟机上执行的指令。正是因为它须要解析代码，而且用户正在期待 JavaScript 进行交互，所以它的执行速度必须很快才行。
在高级方面，JavaScript 引擎像其余语言编译器一样去解析代码。首先，输出的文本流被合成为名为 token 的块。每个 token 代表语法结构中的一个有意义的单元，相似于自然语言中的单词和标点符号。而后，将这些 token 输出到 自上而下的解析器 中，生成生成示意程序的树结构。语言设计师和编译器工程师喜爱把这种树结构称为 AST（形象语法树）。而后就能够通过剖析生成的 AST 来生成称为字节码的虚拟机指令列表。
生成 AST 的过程是 JavaScript 引擎更间接的工作之一。不过它也可能很慢。还记得本文开始时所提到的一大堆代码吗？JavaScript 引擎必须在用户可能开始与站点进行交互之前解析整个捆绑包并构建语法树。对于初始页面加载，其中大部分代码可能是不必要的，甚至根本无法执行其中的某些代码！
不过好在编译器工程师创造了各种技巧来放慢处理速度。首先，某些引擎在后盾线程中解析代码，从而开释主 UI 线程用于其余计算。其次，古代引擎将通过应用名为“提早解析”或“提早编译”的技术，尽可能地提早内存中语法树的创立。
它的工作形式是这样的：如果引擎看到一个可能在一段时间内不执行的函数定义，它会对函数体进行疾速的“抛弃”解析。这种一次性剖析可能发现可能暗藏在代码内的所有语法错误，但不会生成 AST。稍后，当第一次调用该函数时，会再次解析这段代码。这次，引擎将生成执行所需的残缺 AST 和字节码。在 JavaScript 的世界中，执行两次有时比执行一次更快！
然而，最好的优化是使咱们齐全绕开所有耗时解决的优化。对于 JavaScript 编译，这意味着齐全跳过了解析步骤。一些 JavaScript 引擎会尝试缓存生成的字节码，以备当前用户再次拜访该网站时进行重用。这并不那么简略。随着网站的更新，JavaScript 包可能会常常产生扭转，浏览器必须认真衡量序列化字节码的老本与缓存带来的性能晋升之间的关系。
运行时的字节码
当初有了字节码，就能够开始执行了。在当今的 JavaScript 引擎中，在解析过程中生成的字节码首先被送到名为 解释器 的虚拟机中。解释器有点像用软件实现的 CPU。它一次查看一条字节码指令，而后决定要执行的理论机器指令以及下一步要执行的指令。
JavaScript 编程语言的构造和行为在名为 ECMA-262 的文档中进行了定义。其中构造局部被称为“语法”，行为局部为“语义”。编程语言的语义简直都是由伪代码编写的算法定义的。假如咱们是编译器工程师，正在实现 带符号的右移运算符（>>）以下则是规格阐明（以下脚本引自 ECMA-262）：
ShiftExpression : ShiftExpression >> AdditiveExpression
- Let lref be the result of evaluating ShiftExpression.
- Let lval be ? GetValue(lref).
- Let rref be the result of evaluating AdditiveExpression.
- Let rval be ? GetValue(rref).
- Let lnum be ? ToInt32(lval).
- Let rnum be ? ToUint32(rval).
- Let shiftCount be the result of masking out all but the least significant 5 bits of rnum, that is, compute rnum & 0x1F.
- Return the result of performing a sign-extending right shift of lnum by shiftCount bits. The most significant bit is propagated. The result is a signed 32-bit integer.
前六个步骤将操作数（>> 两侧的值）转换为 32 位整数，而后执行理论的移位操作。
然而如果真的齐全依照标准中的形容去实现算法，那么做进去的解释器会很慢。上面以从 JavaScript 对象获取属性值的简略操作为例。
从概念上讲，JavaScript 中的对象就像字典一样。每个属性均以字符串名作为关键字。对象也能够有 原型对象。
如果某个对象没有给定字符关键字的条目，那么就须要在原型中寻找该键。一直反复这个操作，直到找到所需的关键字或达到原型链的开端为止。
这就导致了每次想从对象中获取属性值时，可能要做很多工作。
JavaScript 引擎中用于减速动静属性查找的策略称为 内联缓存。内联缓存最早是在 1980 年代为 Smalltalk 语言所开发的。其根本思维是，先前属性查找操作的后果能够间接存储在生成的字节码指令中。
为了理解它的工作原理，让咱们闭上眼睛，设想 JavaScript 引擎是一座充斥魔法的大型图书馆。当咱们走进去时，会留神到外面塞满了到处飞来飞去的书（即对象）。每个对象都有一个可辨认的形态，这个形态便确定了其属性的存储地位。
假如咱们正在依照书单上所记录的一系列字节码指令执行程序。下一条指令通知咱们从某个对象获取名为 x 的属性的值。你抓住该对象，找出 x 的存储地位，而后发现它已存储在该对象的第二个数据插槽中。
你会发现，具备雷同形态的所有对象在其第二个数据插槽中都有 x 属性。拿出你的笔，在字节码书单上做一个正文，标记出对象的形态和 x 属性的地位。下次再看到这个标记时，只需查看对象的形态就行了。如果形态与你在字节码正文中所标记的形态匹配，不须要查看对象就能够精确晓得数据的地位。这样你就实现了 单态内联缓存。
然而，如果对象的形态与咱们的字节码正文不匹配怎么办？这时能够通过制作一张小表格，并把看到的每种形态作为一行记录的形式来解决这个问题。当每看到一个新形态时，就把它作为一行增加到表中。这样就实现了一个 多态内联缓存。它的速度不如单态缓存快，并且在书单上会占用更多的空间，然而如果行数不多，成果会十分好。
如果最初生成的表太大，就要把它删除掉，并做个正文来揭示本人不要再纠结这个指令的内联缓存了。用编译器的术语来说，实现了一个 复态调用点（megamorphic callsite）。
一般来说单态代码十分快，多态代码差不多一样快，而复态代码则往往很慢。
- 单态：快如疾风
- 多态：动若脱兔
- 复态：慢似乌龟
即时编译（JIT）
解释器的长处在于能够疾速开始执行代码，对于仅运行一两次的代码，这种“软件 CPU”的执行速度还是能够承受的。然而对于“热代码”（运行数百、上千甚至几数百万次的函数）来说，咱们真正想要的是间接在理论硬件上执行机器指令。这时就须要 即时（JIT）编译 了。
当 JavaScript 函数由解释器执行时，会收集对于这个函数被调用的频率以及调用参数的各种统计信息。如果函数常常应用雷同类型的参数执行，那么引擎可能会将函数的字节码转换为机器代码。
上面再次进入后面设想进去的 JavaScript 引擎，也就是那个充斥魔法的图书馆。当程序开始执行时，你应该从贴有标签的架子拿出字节码书单。对于每个函数，大概有一行。依照每行上的阐明进行操作时，你能够记录执行每一行的次数。另外还要留神在执行阐明时所遇到的对象的形态。这时你就是 剖析解释器（profiling interpreter）。
当你看到下一个字节码行时，会留神到该字节码“很热”，因为你曾经执行了几十次，并且认为放慢它的运行速度。你有两个助手能够随时为你翻译。第一个助手能够将字节码疾速转换为机器代码。他生成的代码品质很好，简洁明了，但效率却不如预期。第二个助手工作更加仔细，只管会破费更长的工夫，然而产生的代码通过了高度优化，使速度尽可能的更快。
在编译器方面，咱们将这些不同的助手称为 JIT 编译层。不同的引擎有不同的层数，这取决于它们要进行的衡量和取舍。
你决定将字节码发送到第一个助手哪里有。通过一段时间的解决后，通过用认真记录的笔记，他会产生一个蕴含机器指令的新书单，并将其与原始字节码版本一起放在正确的书架上。下次须要执行该函数时，能够用这个更快的指令集。
但问题是，助手在翻译咱们的书单时做出了很多假如。兴许他认为变量将始终蕴含一个整数。如果这些假如有效会导致什么后果？
这时就必须进行所谓的 bailout 操作。拿出出原始的字节码书单，并弄清楚应该从哪条指令开始执行。机器代码书单会送到第二个助手那里，而后再次开始后面的过程。
超过有限
当今的高性能 JavaScript 引擎曾经远远超过了 1990 年代 Netscape Navigator 和 Internet Explorer 中的绝对简略的解释器，而且还在持续倒退。新性能正在被逐步增加到 JavaScript 语言中。常见的编码模式已失去优化。WebAssembly 也曾经成熟，正在开发更丰盛的规范模块库。作为开发人员，咱们能够冀望古代 JavaScript 引擎可能疾速、高效的执行，只有管制捆绑包的大小，并且能确保不要让对性能至关重要的代码过于动态化。
本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你进步开发效率的古代 CSS 框架
- 疾速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 对于 Git 的 20 个面试题
- 深刻解析 Node.js 的 console.log
- Node.js 到底是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩大插件
- Node.js 多线程齐全指南
- 把 HTML 转成 PDF 的 4 个计划及实现
- 更多文章 …