javascript概述
介绍 (Introduction)
A JavaScript engine is a computer program or an interpreter that executes JavaScript code. A JavaScript engine can be written in a wide variety of languages. For example, the V8 engine which powers Chrome browsers was written in C++, while the SpiderMonkey engine which powers Firefox browsers was written in C and C++.
JavaScript引擎是执行JavaScript代码的计算机程序或解释器。 JavaScript引擎可以用多种语言编写。 例如,支持Chrome浏览器的V8引擎是用C ++编写的,而支持Firefox浏览器的SpiderMonkey引擎是用C和C ++编写的。
A JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode in some form. The first JavaScript engines were almost only interpreters, but most modern engines employ just-in-time (JIT) compilation for upgraded performance.
JavaScript引擎可以实现为标准解释器,也可以实现为实时编译器,将JavaScript编译为某种形式的字节码。 第一个JavaScript引擎几乎只是解释器,但是大多数现代引擎都采用即时(JIT)编译来提高性能。
流行JavaScript引擎 (Popular JavaScript Engines)
All popular browsers have their own implementation of a JavaScript engine. Here are some popular JavaScript engines.
所有流行的浏览器都有自己JavaScript引擎实现。 以下是一些流行JavaScript引擎。
Chrome’s V8 engine
Chrome的V8引擎
Firefox’s SpiderMonkey
Firefox的SpiderMonkey
Safari’s JavaScriptCore (a.k.a Nitro, SquirrelFish and SquirrelFish Extreme)
Safari的JavaScriptCore (又名Nitro,SquirrelFish和SquirrelFish Extreme)
Edge’s Chakra — but Edge has recently embraced Chromium‘s V8 engine
Edge的脉轮 - 但是Edge最近采用了Chromium的V8引擎
JavaScript引擎流程图 (Flow Diagram of the JavaScript Engine)

If you have ever wondered, how your JavaScript is processed, here is a simplified flow diagram.
如果您想知道如何处理JavaScript,这里是一个简化的流程图。
1.解析器 (1. Parser)
Initially, the HTML parser would come across a script tag with a JavaScript source. The source code within this script will be loaded as a UTF-16 byte stream to the byte stream decoder. These bytes are decoded into tokens that are forwarded to the parser. The engine would always avoid parsing code that isn’t currently needed, to be more efficient.
最初,HTML解析器会遇到带有JavaScript源的script标签。 该脚本中的源代码将作为UTF-16字节流加载到字节流解码器。 这些字节被解码为令牌,然后转发给解析器。 引擎将始终避免解析当前不需要的代码,以提高效率。
2. AST (2. AST)
The parser generates nodes that are based on the tokens it receives. With these nodes, the Abstract Syntax Tree (AST) is created. ASTs play a crucial role in the semantic analysis where the compiler validates the proper use of language elements and keywords.
解析器根据接收到的令牌生成节点。 使用这些节点,创建了抽象语法树(AST)。 AST在语义分析中起着至关重要的作用,在该分析中,编译器将验证语言元素和关键字的正确使用。
You can check out a live example by visiting https://astexplorer.net/
您可以通过访问https://astexplorer.net/查看现场示例。
3.口译员 (3. Interpreter)
Next in the flow is the interpreter, it analyzes through the AST and generates byte code. It interprets the code line by line. When the byte code is generated, the AST will be removed and the memory space will be cleared. The interpreter produces unoptimized machine code quickly and can start running without delay.
流程中的下一个是解释器,它通过AST进行分析并生成字节码。 它逐行解释代码。 生成字节代码时,将删除AST,并清除存储空间。 解释器会快速生成未优化的机器代码,并且可以立即开始运行。
The concern with interpreters is that executing the same function several times can get very sluggish, which is why we have a compiler that doesn’t repeat loops and is more streamlined.
解释器担心的是,多次执行相同的函数可能会非常缓慢,这就是为什么我们有一个不重复循环且更加简化的编译器的原因。
4.分析器 (4. Profiler)
The profiler assesses the code as it runs and recognizes areas where optimization techniques can be performed.
探查器在代码运行时对其进行评估,并识别可以执行优化技术的区域。
5.编译器 (5. Compiler)
With the support of the profiler, any unoptimized code is passed to the compiler to perform enhancements and produce machine code that ultimately replaces its equivalent in the previously created unoptimized code by the interpreter.
在探查器的支持下,所有未优化的代码都将传递给编译器以执行增强功能,并生成机器代码,该机器代码最终将解释器替换为先前创建的未优化代码中的等效代码。
6.优化的代码 (6. Optimized code)
At the end of these 6 steps, you will receive a highly optimized code.
在这6个步骤的最后,您将收到一个高度优化的代码。
Let's now have a brief look at Chrome’s V8 engine and what makes it stand out from others.
现在,让我们简要介绍一下Chrome的V8引擎以及使其与众不同的原因。
Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document and organize independent components from any project.
提示:使用Bit ( Github )在项目之间共享可重用组件 。 Bit使共享,记录和组织来自任何项目的独立组件变得简单。
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
使用它可以最大程度地重复使用代码,在独立组件上进行协作以及构建可扩展的应用程序。
Bit supports Node, TypeScript, React, Vue, Angular, and more.
Bit支持Node,TypeScript,React,Vue,Angular等。

Chrome的V8引擎 (Chrome’s V8 Engine)
V8 JavaScript engine is an open-source application written in C++ that compiles JavaScript to optimized machine code before execution. The V8 engine was initially created with the intention of increasing JavaScript performance in Chrome and Chromium-based browsers. Later on, with time, the latest versions enabled the execution of JavaScript code outside of the browser, enabling server-side scripting.
V8 JavaScript引擎是一个用C ++编写的开源应用程序,可以在执行之前将JavaScript编译为优化的机器代码。 最初创建V8引擎是为了提高基于Chrome和Chromium的浏览器中JavaScript性能。 后来,随着时间的推移,最新版本启用了在浏览器外部执行JavaScript代码的功能,从而启用了服务器端脚本。
As initial JavaScript engines were interpreters, they worked on the code line by line. With time, this was not good enough. The Chrome V8 implemented a technique called Just-In-Time (JIT) compilation. This technique uses a mix of both interpreters and compilers to get better execution.
由于最初JavaScript引擎是解释器,因此它们逐行处理代码。 随着时间的流逝,这还不够好。 Chrome V8实施了一种称为即时(JIT)编译的技术。 该技术结合使用了解释器和编译器,以实现更好的执行。
V8与其他引擎有何不同? (How does V8 differ from other engines?)
V8 and other modern engines like SpiderMonkey, Rhino follow the same approach. But what makes V8 stand out is that it does not produce any intermediate code or bytecode.
V8和其他现代引擎(例如SpiderMonkey,Rhino)都遵循相同的方法。 但是使V8脱颖而出的是它不会产生任何中间代码或字节码。
But this all changed after 2016 where Chrome V8 team introduced an interpreter called Ignition. With Ignition, V8 compiles JavaScript functions to a short bytecode, which is between 50% to 25% the size of the equivalent baseline machine code. This bytecode is then executed by a high-performance interpreter which produces execution speeds on real-world websites close to those of code generated by V8’s existing baseline compiler.
但是这一切在2016年之后发生了变化,Chrome V8团队推出了名为Ignition的解释器。 借助Ignition,V8将JavaScript函数编译为一个短字节码,该字节码的大小是等效基准机器代码的50%至25%。 然后,该字节码由高性能解释器执行,该解释器在现实世界的网站上产生的执行速度与V8现有的基线编译器生成的代码的执行速度接近。

快速变化 (Rapid Change)
You must keep in mind that the domain of web development is rapidly changing every day. Especially with browsers, there are numerous attempts to make performance and experience better. This results in regular changes and updates to the structure of the JavaScript engines. Therefore I would always advise you to check the official docs of an engine if you would like to learn more about it, as blog posts can become outdated. Even sometimes, this blog post can be outdated, by the time you read this 😜
您必须记住,Web开发的领域每天都在Swift变化。 尤其是对于浏览器,人们进行了许多尝试来提高性能和体验。 这导致对JavaScript引擎的结构进行定期更改和更新。 因此,如果您想了解更多有关引擎的信息,我总是建议您检查引擎的官方文档,因为博客文章可能会过时。 甚至有时,当您阅读此文章时,此博客文章可能已经过时了。
In the case of V8, the above-shown pipeline illustration is not what is present currently. The below diagram shows the current pipeline. Be aware, this too can change soon as the V8 team is constantly working hard for continuous performance enhancements.
在V8的情况下,上面显示的管线图当前不存在。 下图显示了当前管道。 请注意,随着V8团队不断努力以不断提高性能,这种情况也可能很快改变。


If you compare the above diagrams with the 2016 version of the pipeline, you would find that the Baseline section of the pipeline has completely been removed. You would also find that the Crankshaft has also been removed.
如果将上述图表与管道的2016版进行比较,您会发现管道的“基线”部分已被完全删除。 您还会发现曲轴也已卸下。
相对于旧管道的优势 (Advantages over old pipeline)
The V8 team has given many reasons for this newly updated pipeline, some of them are,
V8团队为此新更新的管道提供了许多原因,其中一些是,
- Reduced memory usage — the ignition code is up to 8 times smaller than full-codegen code 减少内存使用-点火代码比完整代码源代码小8倍
- Improved startup time — the byte code is smaller and faster to generate 缩短了启动时间-字节码更小且生成速度更快
Improved baseline performance — no longer relying on optimizing compiler for sufficiently fast code
改进的基准性能-不再依赖优化编译器来获得足够快的代码
You can read more from the team over here.
V8的新发展 (New Developments from V8)
无JIT模式 (JIT-less mode)
V8 even has a JIT-less mode to run without any runtime allocation of executable memory. This is extremely useful in situations where there is no write access to executable memory in platforms such as iOS, smart TVs, game consoles.
V8甚至具有无需JIT的模式即可运行,而无需在运行时分配可执行内存。 在iOS,智能电视,游戏机等平台上对可执行内存没有写访问权的情况下,这非常有用。
You can read more over here.
您可以在这里阅读更多内容。
后台编译 (Background compilation)
With Chrome 66, V8 compiles JavaScript source code on a background thread, reducing the amount of time spent compiling on the main thread by between 5% to 20% on standard websites.
借助Chrome 66,V8可以在后台线程上编译JavaScript源代码,从而在标准网站上将主线程上的编译时间减少了5%至20%。
Read more in the official blog post over here.
在此处的官方博客文章中了解更多信息。
I hope you got a great overview of a JavaScript Engine. Happy Coding!
希望您对JavaScript引擎有一个很好的了解。 编码愉快!
ResourcesV8 DocsA crash course in just-in-time (JIT) compilers by Lin ClarkArticle by Sander
翻译自: https://blog.bitsrc.io/javascript-engines-an-overview-2162bffa1187
javascript概述