Understand and optimize javascript code

As a front-end engineer, everyone is familiar with javascript. This article will understand how javascript runs from a deeper direction - the JS engine, so as to optimize it.

JS Engine——JS engine introduction

1. Basic introduction

js engine is a specialized JavaScript interpreter. You can take a brief look at the current mainstream js engines and introductions:

• V8 - The V8 engine, which is open sourced by Google using C, is also an engine we often hear

• Rhino — An open source engine managed entirely in Java by the Mozilla Foundation

• SpiderMonkey — The first generation js engine, once ran in the Netscape Navigator browser, Now Firefox

• JavaScriptCore — Safari’s open source js engine

• KJS — KDE engine, developed by Harri Porten

• Chakra (JScript9) — Internet Explorer Engine

• Chakra (JavaScript) — Microsoft Edge Engine

• JerryScript — Lightweight js engine, mainly used for IOT

2. V8 engine running process

Now due to the popularity of NodeJS and Google Chrome, here we mainly introduce the V8 engine The operating mechanism, if you are interested in other engines, you can check it out by yourself. It is basically the same.

We can see that the processing process of the JS engine is to first parse and convert The AST syntax tree is then used by the interpreter to do two main things. The first is to convert it into machine language bytecode, and the second is to be handed over to the editor (optimizing compiler) for optimization. There is also a data analysis process (profilling data) in the middle. , the main purpose is to optimize the operation of JS, and then convert the optimized code into machine language.

The core components caused by V8 are Ignition and TurboFan respectively

JS Code—— Talk is cheap

When you see this, you will definitely think, I know what this is for, Talk is cheap, is there any code that can be analyzed? Then please take a look at the following sample code. After analyzing the code, I will introduce the principle in detail

Sample code one:

// first case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 0; i < 9999999; i++) {
    b[i] = 0
}
console.timeEnd()
 
// second case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 10000000; i < 19999999; i++) {
    b[i] = 0
}
console.timeEnd()
 
// third case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 9999999; i < 0; i--) {
    b[i] = 0
}
console.timeEnd()

After reading the above code, the content is very simple, which is to define object a and b then continue to add attributes. The only difference is that in the first case, a and b repeatedly add the same attributes, in the second case, a and b add different attributes, and in the third case, a and b repeatedly add the same attributes, but process b is in reverse order.

Then the question comes: is there any difference in the running speed of the three pieces of code, and is the difference big? (You don’t need to confirm the number of cycles, they are all the same!)

The answer is: it takes about 3 (500ms)

V8 Engine —— Hidden Class

We know that js is a dynamic scripting language. What does it mean? You can easily add/delete attributes to the object. Or change its type. Most js interpreters use dictionary structures to store the addresses of variable attribute values ​​in memory. This method is different from Java and C# (non-dynamic languages, of course, the dynamic type of C# is another matter. , not to go into details here) is much less efficient, because the type of js can be converted at any time. Originally, using a dictionary structure combined with a fixed type for judgment can make it easier to find the location of the variable attribute value, but it is difficult to achieve in js .

So the V8 engine uses a highly efficient method called Hidden Class. Other engines also have similar methods, including Map, Structures, Hidden Class, etc. Here we use Shape to define it, so that it is easier for everyone to understand.

When we define an object, it will contain the following content:

The meaning of each attribute can be See table above.

Combined with Shape, when defining an object, the JS engine will create a Shape (can be understood as a continuous cache buffer), and its positions 0 and 1 store the x and y values, as shown below:

If I define two objects, both containing x and y, then they will share a shape, as shown below:

So here we can imagine that as long as we define objects with the same attributes, they will all share a shape. When we want to call the attribute value of any shape, we can use the offset of the same shape. Come and get it.

So, what happens when we add attributes to object? The V8 engine will create a new shape to mark the position based on the class transition principle, as shown below

In other words, we created 3 shapes, through the transition chain (transition chain) to realize the traceability of an object.

Seeing this, everyone must be thinking that each additional shape will definitely occupy an extra piece of memory. So in order to optimize, I try to define all the attributes during initialization to optimize, Bingo~ We can refer to the following figure to verify:

Through the above explanation of the principles, I believe everyone will be able to calculate and explain the difference in the execution speed of our sample code.

First Case:

1. Shape (empty) for a and b

2. Shape 1....9999999 for a

3. Shape 1 ....9999999 for b

a and b both share the same shape and can be reused

Second Case:

1. Shape (empty) for a and b

2. Shape 1....9999999 for a

3. Shape 10000000....19999999 for b

defines a total of shapes from 1 to 19999999, so the second case is definitely It takes twice as long as the first case

Thrid Case:

1. Shape (empty) for a and b

2. Shape 1... .9999999 for a

3. Shape 9999999 ....1 for b

Source code: https://github.com/likeconan/Alipay_Wechat_Integration

For more JavaScript knowledge, please follow PHP Chinese websitejs special effects collection column.

The above is the detailed content of Understand and optimize javascript code. For more information, please follow other related articles on the PHP Chinese website!