Browser - learning notes

02 | TCP agreement ： How to ensure that the page file can be delivered to the browser completely ？

1.IP： Send the packet to the destination host

The address of the computer is called IP Address , Visiting any website is actually just your computer asking for information from another computer .

Packets from A Send to host B：

• Data packets + IP head Make up a new IP Data packets （ The network layer ）, And give it to the ground floor
• The bottom layer transmits data packets to the host through the physical network B
• Host computer B Unpack the packet IP Header information （ The network layer ）, And give the disassembled data part to the upper layer

IP head ：IP The head is IP Information at the beginning of the packet , contain IP edition 、 Source IP Address 、 The goal is IP Address 、 Time to live and so on .

2.UDP： Deliver the packet to the application （ Unreliability , But the transmission speed is very fast , Usually online video 、 Use... In interactive games ）

UDP One of the most important messages is the port number , The port number is actually a number , Every program that wants to access the network needs to bind a port number . Through port number UDP Can send the specified packet to the specified program .
IP adopt IP The address information sends the packet to the designated computer , and UDP Distribute the data package to the correct program through the port number .

Packets from A Send to host B Applications for ：
A transport layer is added between the network layer and the upper layer ： Data packets + UDP head Make up a new UDP Data packets , And give it to the network layer

UDP Transmission problems ：

• Data packets are easily lost in the process of transmission , There is no retransmission mechanism , therefore UDP It's impossible to know whether the destination can be reached after sending .
• Large files will be split into many small packets for transmission , These small packets will go through different routes , And at different times to the receiving end , and UDP The protocol doesn't know how to assemble these packets , To restore these packets to a complete file .

3.TCP： Send the data to the application completely （ reliable ）

1.TCP（Transmission Control Protocol, Transmission control protocol ） It's a kind of Connection oriented 、 reliable 、 Transport layer communication protocol based on byte stream . be relative to UDP,TCP There are two characteristics ：

• In the case of packet loss ,TCP Provide retransmission mechanism
• TCP The packet sorting mechanism is introduced , It is used to ensure that the disordered packets are combined into a complete file .

2.TCP Ensure the complete transmission of data , Its connection can be divided into three stages ： Establishing a connection （ Three handshakes ）、 Transfer data and disconnect （ Four waves ）.

3.TCP In order to ensure the reliability of data transmission , At the expense of packet transmission speed , because “ Three handshakes ” and “ Packet verification mechanism ” And so on to double the number of packets in the transmission process .

03 | HTTP Request flow ： Why many sites open the second time quickly ？

1. In the browser HTTP The eight stages of a request from initiation to completion

Build request 、 Find cache 、 Get ready IP And port 、 wait for TCP queue 、 establish TCP Connect 、 launch HTTP request 、 Server processing request 、 Server returns request and disconnect .

2. Why many sites open the second time quickly ？

The main reason is that during the first page load ,DNS cache and Page resource cache These two pieces of data will be cached by the browser . The browser cache uses the local copy directly to respond to requests , Without generating real network requests , Thus saving time . meanwhile ,DNS The data is also cached by the browser , This eliminates DNS Query link .

1.DNS cache ： Relatively simple , It is mainly to put the corresponding in the browser IP Associated with domain name
2. Page resource cache ：

a. If you have a cache , And Not expired

• The browser is through... In the response header Cache-Control Field to set whether to cache the resource . If there is , And not expired , It will directly return the cached resources to the browser

b. If caching Be overdue 了 , The browser will continue to make network requests , And in HTTP Request header with （If-None-Match）. After the server receives the request header , Will be based on If-None-Match To determine whether the requested resource is updated .

• If there is no update , Just go back to 304 Status code , Equivalent to the server telling the browser ：“ This cache can continue to be used , I won't send you data again this time .”
• If the resource has an update , The server will directly return the latest resources to the browser .

3. How the login status is maintained ？

If there is... In the response header sent by the server Set-Cookie Field of , Then the browser will keep the contents of this field locally . When the client sends the request again , Will automatically add... In the request header Cookie Value before sending it out . The server found that the client sent Cookie after , It will check which client sent the connection request , Then compare the records on the server , Finally, get the status information of the user .

07 | Variable Promotion ：JavaScript Is the code executed in sequence ？

1. Variable Promotion

JavaScript The code is in the compilation phase , hold Declaration of variables Part and Declaration of functions Raise the part to the beginning of the code “ Behavior ”. After variables are promoted , Will assign a value to the variable undefined. Why you can use variables or functions before you define them
But in fact, the position of the declaration of variables and functions in the code will not change , It's written in the compile phase JavaScript The engine is in memory

2.JavaScript Code execution process ( To compile the first , Re execution )

1. Compile phase
a. Execution context ： There is a variable environment object in the execution context , The content of variable promotion is saved in this object , Variables and functions are stored in Object of variable environment in
b. Executable code

2. Execution phase
JavaScript The engine starts to execute “ Executable code ”, Will find custom variables and functions from the variable environment

3. In the compilation phase , What if the same variable or function appears ？

What is finally stored in the variable environment is the last defined one , The later defined will overwrite the previous

08 | The call stack ： Why? JavaScript There will be a stack overflow in the code ？

1. Execution context （ execution environment ）

1. Global execution environment ： Throughout the life cycle of the page , There is only one global execution environment ,window object .
2. Function execution environment ： When a function is called , The code inside the function will be compiled , And create a function execution environment , In general , After function execution , The created function execution environment will be destroyed .
3.eval： When using eval Function ,eval The code will also be compiled , And create an execution environment .

2. What is? JavaScript Call stack

1. After the execution environment is created ,JavaScript The engine pushes the execution environment onto the stack , The stack used to manage the execution environment is usually called environment stack , Also called call stack . Call stack is JavaScript A mechanism for engine tracking function execution .
2. Call stack is a data structure used to manage the execution environment , Meet the last in, first out rule
3. have access to console.trace() To output the current function call relationship

3. Stack overflow

The call stack has size , When there are more than a certain number of execution environments on the stack ,JavaScript The engine will report an error , We call this error stack overflow .

09 | Block level scope ：var Defects and why let and const？

1. Scope

Scope refers to the area where variables are defined in a program , This position determines the life cycle of the variable . To understand in a popular way , Scope is the accessible scope of variables and functions , That is, scope controls the visibility and life cycle of variables and functions .

2. Block level scope

1. A block level scope is a piece of code wrapped in a pair of braces , such as ： function 、 Judgment statement 、 Loop statement , Even a single one {} Can be seen as a block level scope .

2. Variables defined inside the code block , It is inaccessible from the outside , And after the code in the code block is executed , Variables defined in the code block are destroyed

3.ES6 Previously, block level scopes were not supported . Without block level scope , Then uniformly promote the variables within the scope , It directly leads to the variables in the function, no matter where they are declared , In the compilation phase, it will be extracted into the variable environment of the execution context , So these variables can be accessed anywhere within the function body , This is the same. JavaScript Variable promotion in .

3.ES6 How to solve the defects caused by variable Promotion

ES6 Introduced let and const keyword , Use let The variables declared by the keyword can be changed , While using const What is stated cannot be changed .

1. The function passes through var Declared variables , In the compilation phase, they are all stored in The variable environment Inside the .
2. adopt let 、const Declared variables , It will be stored in Lexical environment in .
3. Inside the scope block of a function , adopt let Declared variables are not stored in the Lexical Environment .

10 | Scope chains and closures ： The same variable appears in the code ,JavaScript How the engine was chosen ？

1. Lexical scope

Lexical scope ： The scope is determined by the position of the function declaration in the code , So lexical scope is static scope , It can predict how the code will find the identifier during execution . Lexical scope is determined at the code compilation stage , It doesn't matter how the function is called

2. Scope chain

The chain that finds variables through the scope is called the scope chain ; The scope chain is determined by lexical scope , The lexical scope reflects the structure of the code

3. Closure

stay JavaScript in , According to the rules of lexical scope , Internal functions always have access to variables declared in their external functions , When an internal function is returned by calling an external function , Even if the external function has finished executing , But the variables that the inner function references the outer function are still stored in memory , We call the set of these variables closures . For example, the external function is foo, So the set of these variables is called foo Closure of function . If the closure will always be used , So it can exist as a global variable ; But if the frequency is not high , And if it takes up a lot of memory , Try to make it a local variable .

11 | this： from JavaScript Make it clear from the perspective of execution context this

1. this Design defects and solutions

1. defects ： Nested functions this Does not inherit from outer functions
2. Solution ：

• hold this Save as a self Variable , Then use the scope mechanism of variables to pass to nested functions .
• Continue to use this, But change the nested function to the arrow function , Because the arrow function does not have its own execution context , So it inherits... From the calling function this.

2. this Direction problem of

12 | Stack space and heap space ： How data is stored ？

1. js What kind of language is it （ dynamic 、 Weak type ）

JavaScript Is a weak type of 、 Dynamic language . Weak type Means you don't have to tell JavaScript What data type is this or that variable of the engine ,JavaScript When the engine runs the code, it will calculate it by itself . dynamic Means you can use the same variable to hold different types of data .

Static language ： The language that needs to confirm its variable data type before use is called static language
Dynamic language ： The language that needs to check data types during operation is called dynamic language .
Weak type language ： Languages that support implicit type conversion are called weakly typed languages .
Strong type language ： Languages that do not support implicit type conversion are called strongly typed languages

2. data type

1. The original type ：Boolean、String、Number、Undefined、Null、BigInt、Symbol

2. Reference type ：Object

3. Stack space and heap space

Data values of the original type are stored directly in “ Stack ” Medium , Values of reference types are stored in “ Pile up ” Medium .

1. Why save separately ？
This is because JavaScript The engine needs to use the stack to maintain the state of the context during program execution , If the stack space is large , All data is stored in the stack space , It will affect the efficiency of context switching , And then affect the efficiency of the whole program .

So usually , Stack space will not be set too large , It is mainly used to store some small data of original type . And the reference type of data takes up a lot of space , So this kind of data will be stored in the heap , There's a lot of room , Can store a lot of big data , But the disadvantage is that allocating memory and reclaiming memory will take up a certain amount of time .

2. js Copy in
The assignment of the original type copies the value of the variable completely , The assignment of the reference type is to copy the reference address .