Editor:
Author | Lydia Hallie
Translator | meniscus, Zebian | Tu Min
Exhibition | CSDN (ID: CSDNnews)
Next to the translation:
JavaScript is cool (I do not say this), but a machine to understand what is the code we write it? As a JavaScript developer, we usually do not need to deal with what the compiler. However, understanding the basics of JavaScript engine, and know how it will be able to understand the human JS code becomes a machine can understand what is absolutely good!
Note: This article is mainly based on the V8-based Node.js and Chromium browsers that are written.
1. When the parser encounters HTML script tag code, source code will be loaded from the network, or the cache installed in the service worker. This step is the result of script content, returned as a stream of bytes, the byte stream decoder is required to deal with! Byte stream decoder will decode the byte stream at the time of download.
Byte stream to create a symbol decoder (token) to byte data stream. For example, 0066 is decoded into f, 0075 is decoded into u, 006e decoded into n, decoded to 0063 c, 0074 is decoded into t, 0069 is decoded into i, 006f decoded into o, 006e decoded into n, then a space. It seems that you write a function! This is a JavaScript reserved keywords, so it will create a symbol, and then sent to the parser (and pre-parser, my GIF Ituri did not say, but I'll explain later). The rest of the byte stream also treated similarly.
2.
There are two parser engines: a pre-parser (pre-parser), and the other is the parser (parser). Pre-parser only responsible for checking the sign as soon as possible syntax errors in them. This reduces the time required to find the error in the code. Otherwise, these errors will be responsible by the parser found!
If there is no error, the parser will be according to the sign that it receives from the byte stream decoder to create a node, and then use these to create an abstract syntax tree nodes, referred to as AST.
Then there is the interpreter (interpreter) played! Interpreter will traverse the entire AST, bytecode generated according to the contents of the AST. After bytecode generation is complete, the AST will be removed to free up more memory. This will get the machine code can run!
虽然字节码很快，但它还可以更快。字节码在运行的时候会生成信息。它可以检测到哪些行为会更频繁发生，哪些类型的数据会更经常被使用。如果某个函数被调用了许多次，那么就可以通过优化加快速度！
字节码会连同生成的类型反馈一起发送到优化编译器（optimizing compiler）。优化编译器会处理负责处理字节码和类型反馈，然后生成高度优化过的机器码。
avaScript 是一个动态类型语言，这意味着数据类型经常会变化。如果 JavaScript 引擎每次都必须检查值的类型，那就会非常慢。
然而，JavaScript 的引擎使用了一种叫做内联缓存（inline caching）的方法。它会在内存中缓存代码，期待着以后会用同样的行为返回同样的值！比如，一个函数被调用100次，到目前为止每次都返回同样的值。那么引擎就会假设该函数在第101次调用时依然会返回同样的值。
我们假设有一个函数sum，到目前为止每次调用都使用两个数值作为参数：
上面的调用会返回3！下次被调用时，引擎就会假设我们依然会用两个数值进行调用。
如果这个假设正确，那就不需要进行动态查找，可以直接使用内存中保存的值。否则，如果假设错误，就会进行反优化，将代码从优化过的机器码恢复成原始的字节码。
例如，假设下次调用时传递了一个字符串而不是数值。由于 JavaScript 是动态类型，这样做不会产生任何错误！
这意味着数字2会被强制转换成字符串，然后函数会返回字符串"12"。因此引擎会去执行字节码，然后更新类型反馈。
希望这篇文章对你有帮助性！当然，引擎还有许多其他方面我没有讨论到（如JS heap，call stack等），也许以后会讨论！如果你对JavaScript的内部原理有兴趣，我强烈建议你自己做一些研究，V8是开源的，关于其工作原理的文档也非常好！
原文：https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf