Let you understand the working principle of JavaScript

To understand how JavaScript runs and its operating mechanism, first of all, we need to understand the kernel of the browser:

Browser kernel

Those who have learned about it know that different browsers are composed of different kernels. So what kernels are there and what kernels are used by our commonly used browsers:

• Gecko: Used by Netscape and Mozilla Firefox browsers in the early days;
• Trident: Developed by Microsoft, used by IE4~IE11 browsers, but Edge browser has switched to Blink;
• Webkit: Developed by Apple based on KHTML, open source, used in Safari, and previously used by Google Chrome;
• Blink: A branch of Webkit developed by Google and currently used in Google Chrome, Edge, Opera, etc.

The so-called browser kernel refers to the browser's typesetting engine, that is, the browser engine. The engine's work execution process is as follows:

But during this execution process, what should we do if we encounter JavaScript tags when parsing HTML?
It will stop parsing HTML and load and execute JavaScript code;

Of course, why not just load and execute the JavaScript code asynchronously instead of stopping here?

Therefore, the browser wants to put the DOM parsed by HTML and the DOM after JavaScript operations together to generate the final DOM tree, rather than frequently generating new DOM trees;

So, who executes the JavaScript code?
Answer: JavaScript Engine

JavaScript Engine

Why do we need a JavaScript engine?

• In fact, no matter whether you give the JavaScript we write to the browser or Node for execution, it will eventually be executed by the CPU;
• But the CPU only recognizes its own instruction set, which is actually the machine language, and can be executed by the CPU;
• So we need a JavaScript engine to help us translate JavaScript code into CPU instructions for execution;

What are the common JavaScript engines?

• SpiderMonkey: The first JavaScript engine, developed by Brendan Eich (the author of JavaScript);
• Chakra: Developed by Microsoft and used in Internet Explorer.
• JavaScriptCore - JavaScript engine in WebKit, developed by Apple.
• V8: A powerful JavaScript engine developed by Google that also helps Chrome stand out from many browsers; (V8 is a powerful JavaScript engine)

V8 Engine

• V8 is Google's open source high-performance JavaScript and WebAssembly engine written in C++, which is used in Chrome and Node.js, among others.
• It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems using x64, IA-32, ARM, or MIPS processors.
• V8 can run standalone or can be embedded in any C++ application.

The principle of V8 engine executing JavaScript code:

The Parse module converts JavaScript code into AST (Abstract Syntax Tree) because the interpreter does not directly understand JavaScript code;

• If the function is not called, it will not be converted into AST;
• Parse's V8 official documentation: https://v8.dev/blog/scanner

Ignition is an interpreter that converts AST into ByteCode

• At the same time, it will collect the information needed for TurboFan optimization (such as the type information of function parameters, which is necessary for real calculations);
• If the function is called only once, Ignition will interpret and execute the ByteCode;
• Ignition's V8 official documentation: https://v8.dev/blog/ignition-interpreter

TurboFan is a compiler that compiles bytecode into machine code that the CPU can directly execute;

• If a function is called multiple times, it will be marked as a hot function, and then it will be converted into optimized machine code by TurboFan to improve the execution performance of the code;
• However, the machine code will actually be restored to ByteCode. This is because if the type changes during the subsequent execution of the function (for example, the sum function originally executed the number type, but later changed to the string type), the previously optimized machine code cannot handle the operation correctly and will be converted back to bytecode.
• TurboFan's V8 official documentation: https://v8.dev/blog/turbofan-jit

The above is the execution process of JavaScript code

Learn, record, and encourage each other!

This is the end of this article about how JavaScript works. For more information about how JavaScript works, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!