1.JavaScript is a high-level programming language

  • Machine language: 100010001000, some machine instructions;
  • Assembly language: MOV AX Bx, some assembly instructions;
  • Advanced languages: C, C++, Java, JavaScript, Python;

The final run is to be converted to machine language.

2. How browsers work

3. The browser kernel

  • Gecko: Early Netscape and Firefox kernel
  • Trident: Microsoft Internet Explorer, has now moved to the new Edge browser (Blink core)
  • Webkit: The core of Apple’s Safari browser
  • Blink: Google Chrome browser kernel

4. Browser rendering process

  • When the browser parses the HTML file first, it parses it from top to bottom. If JavaScript tags are encountered in the process, parsing stops and the browser gives control to the JS engine, which loads and executes the JS code
  • The corresponding DOM Tree is obtained by parsing HTML tags and JS codes, which is combined with Css style rules to form the Render Tree.
  • Each element of the render tree contains a calculated content, called a layout layout. The browser uses a streaming approach where all elements are laid out in a single pass draw operation.
  • Drawing the nodes of the render tree onto the screen is called painting.
  • Final display page

5. How the V8 engine works

V8 engine is one of the most powerful JS engines. It is written in C++ and can be run independently or embedded into any C++ application.

  • Parse module: Syntax and lexical parsing, JS source code into AST abstract syntax tree, transformed AST syntax tree similar to JSON format. Astexplorer.net/

Babel works like this, by converting an ES6 syntax into an abstract syntax tree, and then converting an abstract syntax tree into ES5.

  • Lgnition: is an interpreter that professes to parse the AST abstract syntax tree into bytecode. It also helps the TurboFan module gather the required information (such as the type of function parameters).
  • TurboFan: is a compiler: it compiles bytecode into machine code. If a function is called multiple times, it is marked as a hot function and converted by TurboFan into optimized machine code to improve machine performance. However, if the parameter type of the function changes during subsequent execution, it is reversely optimized to bytecode

6. Initialize the global object

The js engine creates a global object in heap memory before executing the code: Golbal Objcet(GO)

  • All of the object’s scopes are accessible
  • It contains built-in methods such as Date, String, setTimeout, and so on
  • It also contains a window property pointing to itself

7. Execute the context stack

  • Inside the JS engine, there is an Execution Context Stack (ECS), which is the call Stack used to execute code
  • Execution isGlobal code block
    • A Global block of code creates a Global Execution Context (GEC) for Execution.
    • The GEC will be placed in the ECS for execution
  • The GEC is put into the ECS and contains two parts
    • Part 1: Before code execution, globally-defined variables, functions, etc. are added to GO during the conversion from Parser to AST, but no values are assigned. This process is also known as variable lifting
    • Part 2: Assigning values to variables or performing other functions during code execution

8. Function execution context

  • When a function is encountered, the Execution Context stack creates a Functional Execution Context (FEC) based on the function body and pushes it into the ECS
  • The FEC consists of three parts
    • Part 1: An Activation Object (AO) is created when the parse function becomes an AST tree structure. The AO contains parameters, arguments, function definitions and objects that refer to the function, and defined variables
    • The second part: scope chain: it consists of VO(AO in the function) and parent AO, which is searched layer by layer.
    • Part three: The value of the this binding