Take you to understand how JavaScript works

This article brings you relevant knowledge about javascript. It mainly introduces the operating principles of JavaScript. This article introduces you to it in great detail and has certain reference for your study or work. For reference value, friends in need can refer to it.

[Related recommendations: javascript video tutorial, web front-end】

Understand how JavaScript runs , and its operating mechanism. First of all, we need to understand the kernel of the browser:

Browser Kernel

Everyone who has learned about it knows that different browsers are composed of different kernels. So what kernels are there and which 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 the Edge browser has switched to Blink;
• Webkit: developed by Apple based on KHTML, open source, used in Safari, and Google Chrome was also used before;
• Blink : It is 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, JavaScript tags are encountered during HTML parsing. What should I do?
will stop parsing HTML and load and execute JavaScript code;

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

So the browser hopes to put the DOM parsed by HTML and the DOM after JavaScript operation together to generate the final DOM tree, instead of frequently generating new DOM trees;

Then, Who executes the JavaScript code?
Answer: JavaScript engine

JavaScript engine

Why do we need a JavaScript engine?

• In fact, no matter whether the JavaScript we write is handed over to the browser or Node for execution, it will eventually need to be executed by the CPU;
• But the CPU only knows its own instruction set. In fact, It is machine language that 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 (also the author of JavaScript);
• Chakra: developed by Microsoft, used in IE browser;
• JavaScriptCore: The JavaScript engine in WebKit, developed by Apple;
• V8: The powerful JavaScript engine developed by Google, which 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. It is used in Chrome and Node.js, etc.
• 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 embedded into any C application.

The principle of V8 engine executing JavaScript code:

The Parse module will convert JavaScript code into AST (Abstract Syntax Tree). This is 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 will convert AST into ByteCode (bytecode)

• At the same time, it will collect the information required for TurboFan optimization (such as the type information of function parameters) , Only with the type can real operations be performed);
• If the function is only called once, Ignition will interpret and execute ByteCode;
• Ignition’s V8 official documentation: https://v8.dev/ blog/ignition-interpreter

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

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

The above is the execution process of JavaScript code

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of Take you to understand how JavaScript works. For more information, please follow other related articles on the PHP Chinese website!