“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

V8 is currently the most efficient browser engine and is the engine used by NodeJS

1. V8 compilation principle

Js -> Parse it -> AST(Abstract Syntax Tree) -> Interpreter -> Optimising Compiler [1]-> machine Code -> BytecodeCopy the code

Note :[1] Sometimes our own optimization may not be appropriate, and when he finds that the operation is not appropriate, he will reverse the optimization and remove the optimization just done, but reduce the efficiency of our operation (the code level should try to meet the optimization conditions of his, and write according to the compiler’s expectation, to avoid the situation that may cause back optimization).

2. Code examples

// node.js
const {performance, PerformanceObserver} = require('perf_hooks')

const add = (a, b) = > a + b;

const num1 = 1;
const num2 = 2;

performance.mark('start')

for(let i = 0; i < 1000000; i++){
    add(num1, num2)
}

add(num1, 's') // The type changes

for(let i = 0; i < 1000000; i++){
     add(num1, num2)
}

performance.mark('end')


const observer = new PerformanceObserver((list) = > {
    console.log(list.getEntries()[0]);
})

observer.observe({entryTypes: ['measure']})
performance.measure('measurement 1'.'start'.'end')
Copy the code

2.1 Running Time when the type changes

The results of

PerformanceEntry {
  name: 'measurement 1'.entryType: 'measure'.startTime: 43.814592.duration: 7.716566
}
Copy the code

Run time when the type has not changed

We commented out the above type change code and re-run it to get the following result

Note: There may be errors in a single execution, so you can perform several times and take the average value

PerformanceEntry {
  name: 'measurement 1'.entryType: 'measure'.startTime: 40.301747.duration: 5.263503
}
Copy the code

You can see a significant speed increase. You add multiple times, but the type doesn’t change, and the code is optimized. If the type changes, it triggers de-optimization of V8, which increases the time.

3. Abstract syntax tree

  • Source -> Abstract syntax tree -> Bytecode -> machine code
  • The compilation process is optimized
  • De-optimizations can occur at runtime

4. V8 optimization mechanics

Certainly more than the following three, but the following three is better, behind their own development can refer to its ideas

4.1 Script Flow:

Parsing begins during download. When the download exceeds 30KB, a separate thread will be opened for parsing. After all the loading is complete, the previous parsing will be merged to reduce the parsing time.

4.2 Bytecode Caching:

After the source code is translated into bytecode, for example, it is cached when parts of the same fragment exist on different pages

4.3 Lazy analysis:

For functions, the internal logic is not parsed until it is actually used.

At this point, you can check your code when there is a type of code, can be optimized under · ~ ~

As can be seen here, the introduction of TS will allow us to solve some type conversion problems.