Learn from Coderwhy

1. How browsers work

  • Consider: How is JavaCscript code executed in the browser?

2. Know the browser kernel

  • We often say that different browsers have different kernel compositions
    • Gecko: Early use by Netscape and Mozilla Firefox browsers;
    • Trident: Developed by Microsoft and used by IE4 to IE11, but Edge has moved to Blink;
    • Webkit: KHTML-based, open source, used by Apple for Safari and previously used by Google Chrome;
    • Blink: is a branch of Webkit, developed by Google, currently used in Google Chrome, Edge, Opera, etc. And so on…
  • In fact, we often refer to the browser kernel as the browser’s typography engine:
    • Layoutengine is also called the Browser engine, rendering engine, and rendering engine.

3. Browser rendering process

  • However, in the execution process, the HTML parsing encountered JavaScript tags, what should be done?

    • It stops parsing HTML and loads and executes JavaScript code instead

  • So, who executes the JavaScript code?
    • JavaScript engine

4. Know JavaScript engines

  • Why do you need a JavaScript engine?
    • High-level programming languages require revolutions to execute final machine instructions
    • The fact is that the JavaScript we write needs to be executed by the CPU, whether you hand it to the browser or Node
    • The CPU only knows its own set of instructions, in effect machine language, to be executed by the CPU
    • We need a JavaScript engine to help us translate JavaScript code into CPU instructions to execute
  • A common JavaScript engine
    • SpiderMonkey: The first JavaScript engine developed by Brendan Eich (aka JavaScript author)
    • Chakra: Microsoft for IT Browser;
    • JavaScriptCore: JavaScript engine in WebKit, developed by Apple;
    • V8: The powerful JavaScript engine developed by Google also helps Chrome stand out from other browsers;
    • Mouth, etc..

The relationship between browser kernel and JS engine

  • Here we take WebKit as an example. WebKit actually consists of two parts:
    • WebCore: Responsible for HTML parsing, layout, rendering and other related work;
    • JavaScriptCore: Parses and executes JavaScript code;
  • See here, have learned small program feeling very familiar?

    • JavaScript code written in applets is executed by JSCore;

  • Another powerful JavaScript engine is the V8 engine

5. How V8 engines work

  • Official definition of V8 engine:

    • V8 is Google’s open source high-performance JavaScript and WebAssembly engine written in C++ for Chrome, node.js, etc.

    • It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS10.12+, and Linux systems using x64, ia-32,ARM, or MIPS processors.

    • V8 can run on its own or be embedded in any C++ application.

Extension: astexplorer.net/

AST Abstract syntax tree

6.V8 architecture

  • The source code for the V8 engine itself is quite complex, with over 100w lines of C++ code. By looking at its architecture, we can see how it performs with JavaScript:

  • The Parse module converts JavaScript code into an AST(abstract syntax tree) because the interpreter does not know JavaScript code directly;

    • If the function is not called, it is not converted to an AST;
    • V8. dev/blog/scanne…

  • Ignition is an interpreter that converts the AST to ByteCode

    • Information is collected for TurboFan optimizations (such as the type of function parameters needed to perform real calculations).

    • If the function is only called once, Ignition will do the interpretation of ByteCode;

    • V8. dev/blog/igniti…

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

    • If a function is called multiple times, it is marked as a hot function, which TurboFan converts into optimized machine code to improve code execution.
    • However, the machine code is actually reverted to ByteCode. This is because if the type of the sum function changes during subsequent execution (for example, the sum function used to execute number and then changed to string), the optimized machine code will not handle the operation correctly and will be reversely converted to ByteCode.

  • TurboFan V8 official documentation: V8. Dev /blog/ Turbof…

7.V8 engine parse diagram (official)

8. Details of V8 implementation

  • So how is our JavaScript source code parsed?

  • Blink hands the source code to V8 engine, Stream gets the source code and performs coding transformation.

  • The Scanner does lexical analysis, which translates code into tokens;

  • The tokens are then converted into AST trees, through Parser and PreParser:

    • Parser simply converts tokens into AST tree assemblies
    • PreParser calls it pre-parsing, and why it’s needed is because not all JavaScript code affects the efficiency of a web page;
    • Then the tokens are converted into AST trees, and we go through Parser and PreParser. Parser directly converts the tokens into AST tree architecture.

  • PreParser calls it pre-parsing, so why do you need pre-parsing?

    • √ This is because not all JavaScript code is executed in the first place. Parsing all the JavaScript code will inevitably affect the efficiency of the web page;

    • The V8 engine implemented Lazy Parsing, which preparsing unnecessary functions, meaning that only temporary Parsing is required. Full Parsing of functions is performed only at the time the function is called.

    • √ If we define a function inner inside a function outer, then the inner function will be pre-parsed;

Code interpretation

var name = 'mint'

var num1 = 20
var num2 = 30
var result = num1 + num2

/** * 1. The code is parsed and the V8 engine responds internally to help us create an object (GlobalObject -> go) * 2. To execute code, the V8 engine has an Execution Context Stack (ECStack) * 2.2. Because we enforce a global code, for the sake of the global code to execute normal, need to create a global execution context, | global code needs to be executed when will create) * * /
var globalObject = {
    String: 'class'.Date: 'class'.setTimeout: "Function".window: globalObject,
    name: undefined.num1: undefined.num2: undefined.result: undefined,}Copy the code