❝

The instinct of a man is to keep aloof from things he does not quite understand

❞

Hit home

  1. Chromium itself is a browser
  2. Chrome generally chooses stable versions of Chromium as its base
  3. Browser wars, in essenceRendering enginebattle
  4. V8 is a type of “JS virtual machine”
  5. Source code to V8 is just “a bunch of strings”
  6. Execute JS code core flow 1.To compile the first 2. After the implementation
  7. V8 uses “Just In Time” (JIT) technology to improve efficiency

The article summary

  • Browser brief history: from a group of zhuolu to a large alone
  • V8: A high-performance JS and WebAssembly engine
  • The process of executing JS code

Before we talk about V8 today, I feel it is necessary to briefly describe the history of the browser. “Look at history as a mirror, and you can see what happens.”

Browser brief history: from a group of zhuolu to a large alone

When it comes to browsers, Berners-Lee[1] is a must-mention. Berners-lee, a director of the W3C, invented the world’s first browser, WorldWideWeb (later renamed Nexus), in 1990.

If you want to try the first browser, try wow [2] (self-provided 🪜)

In 1993, Mosaic[3], the browser that would become Netscape, was created. At the time, the Netscape browser was so popular that it dominated the market.

The first browser wars began in earnest in 1995 when Microsoft launched Internet Explorer, inspired by the Mosaic browser. Thanks to the Windows operating system, Internet Explorer gradually supplanted Netscape as the leading browser. The first browser wars ended with IE winning.

Netscape took the lead in developing the FireFox browser under the auspices of the Mozilla Foundation, which netscape founded in 1998. Version 1.0 was released in 2004, ushering in the second browser war.

Apple released Safari in 2003, a year before FireFox 1.0 was released. In 2005, Apple launched a new open source project, Webkit4 (the core of the Safari browser).

In 2008, Google created a new project Chromium[5] (self-provided 🪜) with Apple’s open source project Webkit as the kernel. Based on the Chromium project, Google released its own browser, Chrome. “Chromium is the browser itself,” not the Chrome kernel, which generally chooses stable versions of Chromium as its base. Chromium is an open source testing ground.

Since then, there have been three desktop browsers (IE/FireFox/Chrome).

Over time, Chrome has become a runaway favorite on the desktop. Leaving the old adversary behind. According to the latest stats from StatCounter [6], Chrome is now half the market.

❝

The browser wars, in fact, are the render engine wars

❞

Chrome/Safari’s rendering engine is in the same vein. Are based on Webkit directly developed or derived.

V8: A high-performance JS and WebAssembly engine

With a short eight-part article describes the browser’s development history and the browser’s current market share. Chrome dominates the browser market by a wide margin. In line with the non-resistance policy of “if you can’t beat it, join it”, all of our subsequent articles will be explained and experimented with in Chrome.

It’s getting late. Let’s get down to business.

V8 is Google’s open source high-performance JavaScript and WebAssembly engine written in C++. It is used in Chrome and Node.js, among others.

(For the introduction of JS, please refer to the data types in the previous JS article [7], and we will also have an introduction and analysis of this technology in the future.)

To put it simply:

❝

V8 is one of ** “JS virtual machines” ** (there are other types of JS virtual machines besides V8. JavaScriptCore in Safari, TraceMonkey in FireFox, etc.)

❞

In the article on how the CPU runs programs, programs (high-level languages) need to be “transformed” ** if they are recognized and executed by the CPU. The conversion operation can be divided into: 1. Interpretation execution 2. Compilation execution. Yesterday, we analyzed and executed a section of C code to understand the process of compilation and execution. There are no examples for explaining execution. Today, let’s fill in the hole.

Think of V8 as a fictional computer, also known as a ** “virtual machine”. Virtual machines implement code execution by simulating various functions of real computers. Such as simulating the actual computer CPU, stack, registers, and so on, and it has its own set of “instruction system” **.

JS virtual machine can be easily understood as a ** “translation” ** program: the human can understand the programming language JS, machine can understand the machine language.

The process of executing JS code

The preparatory work

You need to prepare some basic environment that you need to execute JS

  • Initializes heap and stack structures in memory
  • JS global execution context (contains global information in the execution process, such as some built-in functions, global variables, etc.)
  • Global scope (contains global variables that need to be stored in memory during execution)
  • Initializing the Message Loop system(1. Message driver 2. Message queue)

Execute the process

  1. V8 receives the JS source code to execute (source code to V8 is just ** “a bunch of strings” **, V8 does not directly understand the meaning of this string)
  2. V8 structures the string to generate the “abstract syntax tree” (AST), as well as the associated “scope”
  3. Generate bytecode (code intermediate between AST and machine code).Independent of a particular type of machine code
  4. The interpreter (Ignition) interprets the execution of the bytecode in order and outputs the execution results.

❝

Draw a conclusion from the diagram: execute the JS code core flow 1. Compile first 2. After the implementation

❞

One drawback of executing JS by converting JS to bytecode in V8 and then executing the output through the interpreter is that if you open the same page again in a browser, the binary code will remain unchanged when the JavaScript file in the page is not modified. Means the compilation step ** “wastes CPU resources” **.

To make better use of CPU resources, V8 uses “JIT” (Just In Time) technology to improve efficiency: instead, it mixes compilation execution with interpretation execution.

❝

1. Explain execution starts slowly but executes slowly. 2. Compile execution starts slowly but executes quickly

❞

To enable compilation execution, V8 introduced TurboFan(the optimized compiler), and the monitoring robot flagged a piece of code as hot if it was found to be “executed multiple times” while interpreting bytecode execution.

When the code is marked as hot after a long period, the V8 will drop the bytecode to optimize the compiler (TurboFan), optimizing compiler to compile bytecode in the background of “binary” * * * *, and then to the compiled binary code optimization operation, the optimized binary machine code execution efficiency will be improved.

At the same time, because JS is a dynamic language, the structure and attributes of the object can be arbitrarily modified at run time, and the optimized code by the optimized compiler can only be aimed at a fixed structure. If the structure of an object is dynamically modified during execution, the optimized code will become invalid code, and the optimized compiler will need to perform a “de-optimization operation” **. The de-optimized code will fall back to the interpreter the next time it is executed.

References:

  1. Inside Webkit technology
  2. Google V8

Reference

[1]

Berners-lee: baike.baidu.com/item/%E8%92…

[2]

Experience the wow: worldwideweb. CERN. Ch/browser / # ht…

[3]

Mosaic: baike.baidu.com/item/Mosaic…

[4]

Webkit: webkit.org/

[5]

Chromium: www.chromium.org/

[6]

Statcounter: gsa.statcounter.com/browser-mar…

[7]

JS data types for those things: mp.weixin.qq.com/s/v-nqPc22f…