Let you understand the working principle of JavaScript

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:

insert image description here

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!

You may also be interested in:
  • Detailed explanation of JavaScript operation mechanism and a brief discussion on Event Loop
  • Learn the operating mechanism of jsBridge in one article
  • Detailed process of installing Docker, creating images, loading and running NodeJS programs
  • How to run JavaScript in Jupyter Notebook
  • Solve the problem that running js files in the node terminal does not support ES6 syntax
  • Tutorial on compiling and running HTML, CSS and JS files in Visual Studio Code
  • Example of running JavaScript with Golang
  • Front-end JavaScript operation principle

<<:  Detailed explanation of Nginx status monitoring and log analysis

>>:  Mysql multiplication and division precision inconsistency problem (four decimal places after division)

Recommend

Introduction to using data URI scheme to embed images in web pages

The data URI scheme allows us to include data in a...

Tutorial on installing VMWare15.5 under Linux

To install VMWare under Linux, you need to downlo...

Classification of web page color properties

Classification of color properties Any color can ...

Drawing fireworks effect of 2021 based on JS with source code download

This work uses the knowledge of front-end develop...

Tutorial on installing mysql5.7.17 via yum on redhat7

The RHEL/CentOS series of Linux operating systems...

MySQL Basics in 1 Hour

Table of contents Getting Started with MySQL MySQ...

How to load the camera in HTML

Effect diagram: Overall effect: Video loading: Ph...

Detailed explanation of MySQL Strict Mode knowledge points

I. Strict Mode Explanation According to the restr...

Html page supports dark mode implementation

Since 2019, both Android and IOS platforms have s...

How to configure static network connection in Linux

Configuring network connectivity for Linux system...

Summary of MySQL password modification methods

Methods for changing passwords before MySQL 5.7: ...

How to use webpack and rollup to package component libraries

Preface I made a loading style component before. ...

The best way to solve the 1px border on mobile devices (recommended)

When developing for mobile devices, you often enc...