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

Two box models in web pages (W3C box model, IE box model)

There are two types of web page box models: 1: Sta...

Mysql query the most recent record of the sql statement (optimization)

The worst option is to sort the results by time a...

Implementing shopping cart function based on vuex

This article example shares the specific code of ...

Tutorial on how to install and use Ceph distributed software under Linux

Table of contents Preface 1. Basic Environment 1....

About Zabbix forget admin login password reset password

The problem of resetting the password for Zabbix ...

MYSQL's 10 classic optimization cases and scenarios

Table of contents 1. General steps for SQL optimi...

Ajax responseText parses json data case study

Solve the problem that the responseText returned ...

Specific method to delete mysql service

MySQL prompts the following error I went to "...

How to automatically delete records before a specified time in Mysql

About Event: MySQL 5.1 began to introduce the con...

React High-Order Component HOC Usage Summary

One sentence to introduce HOC What is a higher-or...

MYSQL slow query and log example explanation

1. Introduction By enabling the slow query log, M...

Examples of correct use of maps in WeChat mini programs

Table of contents Preface 1. Preparation 2. Actua...

A brief analysis of the difference between FIND_IN_SET() and IN in MySQL

I used the Mysql FIND_IN_SET function in a projec...

Analysis of Hyper-V installation CentOS 8 problem

CentOS 8 has been released for a long time. As so...