current position:Home>Chrome V8
Chrome V8
2021-08-27 06:11:15 【Avocado is my favorite】
What is? V8
V8, Also known as virtual machines ( Can simulate the actual computer CPU、 Stack 、 Register, etc , It also has its own set of Command set system , about JavaScript Come on ,V8 It's the whole world , So don't worry about JavaScript Differences in the computer environment ), It's a by Google Open source for development Javascript engine , It is currently used in Chrome The browser and Node.js in , Its core function is to perform tasks that are easy to understand by humans JavaScript Code .
Its main core process is divided into compile and perform Two steps . First, you need to JavaScript The code is converted into low-level intermediate code or machine code that the machine can understand , Then execute the converted code and output the execution result .
Why should high-level code be compiled before execution
You can take CPU As a very small computing machine , We can use binary instructions and CPU To communicate . In order to be able to complete complex tasks , The engineer provided a lot of instructions , To realize various functions , It's machine language . Be careful ,CPU Only binary instructions can be recognized , That is to say Machine instructions . And what people can see is Assembly instruction .
1000100101011010 Machine instructions
mov ax bx Assembly instruction
Copy code
Assembly language needs to consider the details of computer architecture , and JavaScript,C,Python These high-level languages , Then mask these differences . however , High level languages also need to be parsed , To be carried out . There are two main ways :
- Explain to perform
- Compile implementation
V8 How to execute a paragraph JavaScript Code ?
V8 It is a combination of compilation execution and interpretation execution , be called JIT(JUST IN TIME) technology . Explain that the startup speed of execution is fast , The execution speed of compilation execution is fast , Therefore, it combines the advantages of the two . The specific process is shown in the following figure :
- Initialize the environment at startup : Stack space 、 Global execution context 、 Event loop system initialization
- The source code is AST analysis , Generate related scopes at the same time , Store relevant variables in the scope
- Generate intermediate code ( Bytecode )
- Interpreter interpretation execution
- If you find that a piece of code has been executed multiple times , Will be marked as hot code , Throw it to the compiler to compile it into binary optimization code for execution .
- If the optimized code , Modified structure , Then anti optimization code is generated , The next execution is still left to the interpreter
V8 Debugging tools :D8
- Print AST
pt --print-ast xxx.js
Copy code
- View scope
pt --print-scopes xxx.js
Copy code
- View the bytecode generated by the interpreter
pt --print-bytecode xxx.js
Copy code
- View the optimized hotspot code
pt --trace-opt xxx.js
Copy code
- Look at the anti optimization code
pt --trace-deopt xxx.js
Copy code
JavaScript design idea
Fast and slow attributes
as follows , Define an object :
let foo = {'10': 1,100: 'dds', 2: 'sda', 1: 'fdsf', 'ds': 'sda', '3': 'dfs'}
Copy code
Print object , You can see , The number is key The attribute of will be listed in the alphabet, and the attribute is key In front of , And the number is key The properties of are arranged in numerical order :
among , The number is key The attribute of is called fast attribute , The letter is key Is called the slow property . The reason for this result is that in ECMAScript Specification , Defines that numeric attributes should be sorted in ascending order of index size , String properties are arranged in ascending order according to the order of creation time . Numeric attributes are called Sort properties , stay V8 Known as elements, The string attribute is called General properties , stay V8 Known as properties.
Because the search speed of linear structure is fast , The search speed of dictionary structure is slow , therefore ,10 General properties within are built into the object , Easy to find quickly , More than ten will still be put in properties in .
except elements and properties attribute ,V8 Also implemented for each object map Properties and __proto__ attribute .map It's a hidden class , Used to quickly find object properties in memory .
The function expression that is called immediately
The main differences between function expressions and function declarations are as follows :
- Function expressions are used in expression statements function Of , The most typical expression is
a=b
This form , Because a function is also an object , We putvar a = function(){}
It's called a function expression - In a function expression , You can omit the function name , To create anonymous functions (anonymous functions)
- A function expression can be used as a just in time call function ——IIFE
JavaScript There is a parenthesis operator in , You can put an expression in parentheses , Such as
(a=3)
Copy code
Because the expression stored between parentheses must be , So if you define a function in parentheses , that V8 I'll also think of this function as a function expression , When executed, it returns a function object .
(function(){
var a = 3
return a + 3
})
Copy code
We add the calling bracket directly after the expression , It is called an immediate call function expression (IIFE).
(function(){
var a = 3
return a + 3
})()
Copy code
Because the function immediately calls the expression is also an expression , So in V8 Compile phase ,V8 Does not handle function expressions , The function object... Will not be created for this expression . One advantage of this is that it won't pollute the environment , Neither the function nor its internal variables will be accessed by other parts of the code .
Prototype inheritance
JavaScript Each object contains a hidden property __proto__, This is the prototype of the object .__proto__ The object pointed to is called the prototype object of the object . The following is the prototype chain , Used to find properties for objects , Look up the properties on the object one level at a time as follows .
Inheritance is that one object can access properties and methods in another object , stay JavaScript in , We implemented the inherited features through prototype and prototype chain .
The implementation of inheritance should be realized through the constructor . Each function object has an exposed prototype attribute , When you use this function as a constructor to create a new object , The prototype object of the newly created object points to the function prototype attribute .
Scope chain
Each function needs to find its own scope when executing , We call it function scope .V8 During the compilation phase of the function, a scope is created for the function , Variables defined in the function and declared functions will be thrown into the scope , In addition, the system will add another hidden variable this.
In the execution phase , If a variable, the function cannot be found in this scope , Will go to the scope where the function is defined to find , Not the scope in which it is called , This is it. Scope chain . because JavaScript Based on Lexical scope Of , The order of lexical scopes is Function definition Determined by the position of , The scope is determined when the function is declared , So the lexical scope is called Static scope . dynamic scope Just care where the function is called , The scope chain is based on the call stack rather than the location defined by the function .
Look at a question :
var a = []
for (let i=0; i < 10; i++) {
a[i] = function(){
console.log(i)
}
}
a[3]()
Copy code
let
Defined i
Will run for
In the block level scope of , Execute the loop once at a time , Create a block level scope . In this block-level scope , Another function is defined , This function references an external variable i
, There's a closure , because a Not destroyed , So... In all block level scopes i
Will not be destroyed . Because every in a closure i
The values are different , So you can print out the corresponding i
Value 3
. however , If you put variables i
Statement of , from let
Switch to var
, here i Is a variable in the global scope , Because there is only one global scope , therefore i
The value of is always changing . The final printed result will be 10
.
Type conversion
The process is as follows :
- First, check whether there is... In the object
valueOf
Method , If there is and the original data type is returned , Then use this value for cast - If
valueOf
No original type returned , Then use it withouttoString
Return value of method - If
valueOf
andtoString
Neither method returns the basic data type , May be an error .
let foo = {'10': 1,100: 'dds', 2: 'sda', 1: 'fdsf', 'ds': 'sda', '3': 'dfs'}
foo.valueOf() // Return the value of the object itself
foo.toString() // return [object Object]
foo + 2 // Return results :[object Object]2
// If you change foo Of valueOf Method
foo.valueOf = function(){return '100'}
foo + 2 // Return results :1002
foo.valueOf = function(){return 100}
foo + 2 // Return results :102
Copy code
Compilation pipeline
Runtime environment
In execution JavaScript Before code ,V8 The runtime environment for the code is ready , This environment includes Heap space and stack space 、 Global execution context 、 Global scope 、 Built in built-in functions 、 Extension functions and objects provided by the host environment , And the message circulation system .
What is the host environment
To execute V8 Need a hosting environment , It could be a browser 、Nodejs Or other custom development environment , These hosting environments provide V8 perform JavaScript Basic functional components required for . The following figure shows the host environment and V8 Functional diagram of :
Heap space and stack space
stay Chrome Just open a rendering process , The rendering process initializes V8, Also initialize stack space . Stack space is used to manage JavaScript Of a function call . Didn't call a function , Just push the function onto the stack , Function encountered during execution , Just press it into the stack , After execution, the function is out of the stack , Until all function calls are completed , The stack is emptied .
Stack space is a continuous space , The address of each element in the stack is fixed , Therefore, the search efficiency of stack space is very high , But it is usually difficult to allocate a large continuous space in memory , therefore V8 The size of stack space is limited , If the function call is too deep , The stack may overflow .
Heap space is a tree storage structure , Discrete data used to store reference types . Heap space can hold a lot of data , But the reading speed will be slow .
function add (x, y) {
return x + y
}
function main () {
let num1 = 2
let num2 = 3
let num3 = add(num1, num2)
let data = {
sum: num3
}
return data
}
main()
Copy code
Let me explain , The execution process of the above code :
- establish
main
Stack frame pointer of function - In the stack
num1
initializationnum1 = 2
- In the stack
num2
initializationnum2 = 3
- preservation
main
Stack top pointer of function - establish
add
Stack frame pointer of function - In the stack x initialization
x = 2
- In the stack y initialization
y = 2
- take
x,y
The added value is stored in a register - The destruction
add
function - resurrection
main
Stack top pointer of function - In the stack
num3
initializationnum3
= In registeradd
The return value of the function - Create a new object in heap space , Return the object address assigned to
data
- Write the return value to the register
- The destruction
main
function
Here's the picture , It means a stack :
The following figure shows the relationship between register and bytecode stack :
- Use an area of memory to store bytecode
- Use general purpose registers r0,r1... These registers are used to store some intermediate data
- PC The register is used to point to the next bytecode to be executed
- Stack top register to point to the top of the stack
- The accumulator is a very special register , Used to save intermediate results . such as : function return End execution of current function , And pass control back to the caller , The returned value is the value in the accumulator .
Global execution context
There are three main parts in the execution context , The variable environment 、 Lexical Environment and this
keyword . For example, in a browser environment , The global execution context contains window
object , There is also a point window
Of this
keyword , There are others web api function ,setTimeout
、XMLHttpRequest
etc. . In the Lexical Environment , It contains let、const
And other variables .
Construct an event loop system
For event loop systems , Because all tasks run on the main thread , In the browser page ,V8 Will share the main thread with the page , Shared message queue , So if a function executes too long , It will affect the interactive performance of the page .
Machine code :CPU How to operate binary code
Look at a piece of code :
int main() {
int x = 1;
int y = 2;
int z = x + y;
return z;
}
Copy code
The above code will be compiled by the compiler assembly code , And binary code . Here's the picture , Stack storage is Continuous space , Through the pointer and register, the function on and off the stack is realized :
Lazy parsing
The so-called inert interpretation means , During parsing, the parser , If you encounter a function declaration , Then the code inside the function will be skipped , It does not generate AST And bytecode , Only one function object is generated . The function object contains name, and code attribute .name It's the name of the function ,code Is the source code of the function .
function foo(a, b) {
var d = 100
var f = 10
return d + f + a + b
}
var a = 1
var c = 4
foo(1, 5)
Copy code
The final generation is the number of abstract syntax of the top-level code :
When you meet Closure When the condition of , At the stage of executing the function , Although it does not parse and execute its internal functions , However, the pre parser still needs to determine whether its internal functions refer to its variables .
The pre parser will judge the syntax error , And check whether the external variables referenced inside the function . If you reference an external variable , The pre parser copies the variables in the stack to the heap , The next time the function is executed , Directly use references in the heap , This solves the problem that closure external variables cannot be destroyed .
Hidden class
stay V8 in , Hidden classes are also called map, Each object has one map attribute , Its value points to the hidden class in memory . Hidden classes describe the property layout of objects , It mainly includes the attribute name and the offset corresponding to each attribute .
var point = {x=200,y=400}
Copy code
With map after , When you use again point.x Access properties x when ,V8 Will inquire about point Of map in x Attribute relative to point The offset of the object , And then point The starting position of the object plus the offset , Got it. x The location of the value of the property in memory , It eliminates a more complex search process .
It should be noted that :
- Objects with the same structure and different values can share the same hidden class
- If the object structure changes , Hidden classes need to be recreated , This will affect V8 Efficiency of execution
therefore , When writing code , Pay attention to the following points :
- When initializing objects with literals , To ensure that the order of attributes is consistent . because key The initialization sequence is different , It will also lead to different structures .
- Try to use literals to initialize complete object properties at one time , Don't add... One by one .
- Avoid using delete Method to delete a property .
// bad
var point = {x=200,y=400}
var point2 = {y=200,x=400}
// bad
var x = {}
x.a = 1
x.b = 2
Copy code
Event loop system
Garbage collection mechanism
copyright notice
author[Avocado is my favorite],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827061107929x.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich