🎸🎸🎸 Hello everyone, I am Cola_ guitar, a front-end white, just read some browser things, here to talk with you about the principle of browser, the following is what I think is more important, so I made notes to share with you, that well, no more talk, let’s directly look at Ha 🀭, 🀭, 🎸.

❓❓❓ For example, what happens when we open a browser, type the url in the input box, and hit Enter to run?

⭐ before speaking, we first to understand the network, between the sender and receiver through what to transmit data?

At the heart of such a vast and complex system is the “protocol” — the rules that communication parties must follow, under which different datagrams can be resolved into different responses.

Computer networks are divided into five layers:

Application layer Transport layer Network layer Data link layer Physical layerCopy the code

We are divided into three stages to explain:

  • HTTP request phase
  • HTTP response phase
  • Browser render phase

HTTP request => Response

The application layer

The application layer is closest to the user, and each process on the host constitutes the application layer.

⭐ First, the browser returns the IP address of the domain name using the DNS protocol. Then, the application layer creates a “TCP socket” and encapsulates the request action into an Http datagram and pushes it into the socket. The application layer may send dozens of datagrams at the same time, and sockets are used to distinguish applications at the application layer. They are often identified by port numbers and IP addresses.

There are two types of sockets: TCP socket and UDP socket

TCP socket: Ensures that the datagram reaches its destination reliably, but takes time.

UDP socket: the datagram is not guaranteed to reach the destination, but is fast.

Principle of DNS

Now let’s look at the principle of DNS

DNS servers are classified into the root DNS server, top-level DNS server, and authoritative DNS server.

The ⭐ TOP-LEVEL DNS server is responsible for top-level domain names such as com, org, net, edu, and gov. The root DNS server stores the IP addresses of all top-level DNS servers. This means that the top-level domain service can be found through the root server (the root server returns all the IP addresses that maintain the top-level domain name). Then you select any of the lDOMAIN servers and ask the LDOMAIN server to make a judgment and give the address of the authoritative server responsible for the current domain (in the case of Baidu, the Ldomain server will return all the authoritative server addresses responsible for the Baidu domain). Finally, select one of the authoritative server addresses and continue to query it for the specific IP address of www.baidu.com. The authoritative server will return the specific IP address to you.

After that, there’s another important point:

Local DNS server: it is the assistant of the host to help the host query the IP address of the domain name

β€» The router will not only return the IP address, but also tell you a DNS server address. This is your local DNS server address. (That is, just tell it all your DNS requests and it will look them up for you and return them to you).

In addition, the local DNS server is usually cached. Records are usually cached within two days, so most of the time you will not notice the resolution process, because it is usually taken from the cache, which is very fast.

Let’s look at this (this is someone else’s picture, but it clearly describes the problem) :

The host sends query packets to its local DNS. If there are query packets in the cache of the local server, the host obtains them from the cache. If the local server does not find one in the cache, it selects a query packet from the internal root server list. The root server resolves the suffix name and tells the local server that is responsible for the list of all top-level servers in.com. The local server selects a top-level domain server to continue the query. After obtaining the domain name, the.com domain server parses the domain name and returns the list of all authoritative servers responsible for the. Xx domain. The local server sends a query packet from one of the returned authoritative servers and finally obtains the SPECIFIC IP address from an authoritative server, and returns the result to the host.

This is just how DNS works at the application level.

Next, let’s see how to go to the transport floor

Transport layer

⭐ The task of the transport layer is to collect all the datagrams pushed out of the socket by the application layer, repackage the application layer datagrams according to the transport layer protocol specified by the application layer, TCP or UDP, and push them to the network layer for sending.

TCP: a connection-based reliable transport protocol (suitable for applications that require high data integrity).

UDP: connectionless and unreliable transport protocol (suitable for scenarios that allow data loss but require very high transfer rates).

UDP

UDP is different from TCP in complexity. It does not guarantee the reliable transmission of data to the destination, nor does it guarantee the data to the destination in sequence. It only provides simple error checking.

The source port number is used to respond to packet delivery, the destination port number is used to deliver data to the destination process, and the checksum is used to check whether the data is damaged during transmission. If the data is damaged, UDP directly dismisses the packet.

TCP

TCP is slightly more complex, being connection-oriented and providing reliable data transfer services based on connections. This is where TCP’s “three handshakes” and “four waves” come in.

Three-way handshake

  • To put it simply:

    1. The client sends the SYN to the server
    2. The server returns SYN,ACK
    3. The client sends an ACK

  • From the perspective of understanding:

The purpose of the three-way handshake is to establish a reliable communication channel. The main purpose of the three-way handshake is for both parties to confirm that their sending and receiving functions are normal.

  1. The first handshake: the client confirms nothing; The server confirms that the sent message is normal
  2. The second handshake: the customer confirms that the sending and receiving is normal, and the receiving and sending are normal. The server confirms that the receiver can receive the message correctly and the receiver can send the message correctly
  3. Third handshake: the customer confirms that the sending and receiving is normal, and the receiving and sending are normal. The server confirms that the sending and receiving functions are normal, while the other party sends and receives normally. Therefore, three handshakes can confirm that both the sending and receiving functions are normal.
Four times to wave

In network data transmission, the transport layer protocol disconnection process is called the quadruple wave.

  • First wave: The Client sets the FIN to 1 and sends the serial number SEQ to the Server. Enter the FIN_WAIT_1 state.
  • Second wave: After receiving a FIN, the Server sends an ACK=1 and acknowledge number= received serial number +1. The CLOSE_WAIT state is displayed. At this point, the client has no data to send, but can still accept the data sent by the server.
  • Third wave: The Server sets the FIN to 1 and sends a sequence number to the Client. Enter the LAST_ACK state.
  • Fourth wave: The Client enters the TIME_WAIT state after receiving the FIN from the server. Then set ACK to 1 and send an acknowledge number= serial number +1 to the server. After receiving the acknowledge number, the server changes to the CLOSED state and does not send data to the client. The client also enters the CLOSED state after waiting 2*MSL (maximum lifetime of packet segments). Complete four waves.

From the perspective of understanding:

The four wave disconnects to make sure all data has been transferred

  1. After the client finishes the conversation with the server, the client terminates the conversation by saying to the server: I am closing the connection (first wave).
  2. The server receives the message from the client and says: Ok, you are going to close the connection. (Second wave).
  3. The server then determines that it has nothing more to say to the client, and says to the client, I’m going to close the connection. (Third wave).
  4. The client receives the message that the server is closing the connection and says, “I received the message that you are closing the connection. (fourth wave) before closing.

The transport layer’s job is to retrieve all the data that needs to be sent from the sockets of each process in the application layer, and then select TCP or UDP to encapsulate the data and push it to the network layer below for sending, which then enters our network layer.

Here network layer, data link layer, the physical layer is relatively partial, there is a question you can search to have a look, here only to say what to do.

The network layer

In fact, the network layer solves a forwarding problem. It divides the network scope through IP protocol, that is, I can find out how to find the gateway router in charge of you through your IP without directly connecting you with the network cable, and transmit data packets to you through your gateway route.

Data link layer

The network layer addresses packet forwarding to the destination network, that is, the gateway route that is forwarded to the destination network, while the link layer addresses packet broadcasting to individuals, that is, the destination host.

The physical layer

The physical layer is just a bunch of 0, 1, 0, 1 electrical signals.

πŸƒπŸƒπŸƒ to the last stage, is also the most knowledge of a stage, we have a good look, you can easily understand the reasons for many optimization methods.

Browser render phase

For example analytical

First of all, let’s understand the relationship between these three: Process, Thread, Stack.

A process is a factory that has its own resources; Factories are independent of each other (processes are independent); Threads are workers in a factory, where multiple workers collaborate to complete tasks; One or more workers (can have multiple threads) in the factory; Shared space between workers (threads can pass tasks to each other);Copy the code

Rendering process

Let’s take a look at the inner workings of the access address, starting with a picture:

⬇ ⬇ ⬇

⭐ first input the address on the client side, send a Request, DNS resolution, TCP three-way handshake and four-way wave, enter the server side, get the code, the browser will open a stack of memory in the memory bar, used to provide an environment for the code. At the same time, a main thread is allocated to parse the code line by line. In the process of parsing the code, operations will be carried out on the stack and off the stack. When the browser encounters a link/script/img request, a new thread will be created to load the resource file in the waiting Task Queue. When the process from top to bottom is complete, a DOM Tree will be generated, and then the thread will wait for the Task Queue to unload the loaded resource files one by one. When all processing is complete, a CSSOM Tree will be generated, and then the DOM Tree will combine with the CSSOM Tree to form a Render Tree. The render tree is redrawn by backflow to calculate viewport size, and finally displayed on the page by GPU.

Code loading order:DOM Tree rendering (HTML) ==> generates CSSOM(CSS), the combination of the two generates Render Tree (Render Tree) ==> Backflow (calculate viewport size) ==> Redraw ==> Gpu display on the page

  • Redraw: Changes in element style (width, height, etc.).
  • Backflow: A change in the size or position of an element triggers a rearrangement, and a sluggish render tree recalculates the layout and rendering.

Performance optimization

1. Reduce the number and size of HTTP requests.

  • Resource consolidation and compression
  • Lazy loading of images
  • All audio and video streaming files

2. Avoid DOM redrawing and backflow.

  • Avoid DOM manipulation (Vue, React)
  • Separate reads and writes :(keeping style Settings together (browsers have a wait _ mechanism and separate reads and writes avoid triggering backflow);
  • Batch processing as far as possible;
  • Cache processing;
  • Element batch modification;
  • Animation effects are applied to position and Fixed elements (out of the document flow);
  • Sacrifice smoothness for speed.
  • Css hardware acceleration (GPU acceleration) (Transform /opacity triggers GPU acceleration, but does not trigger backflow or redraw);

⭐ in Js Jq, offsetTop, offsetWidth, offsetLeft, offsetHeight, clientTop, clientWidth, clientLeft, clientHeight, scrollTop, ScrollWidth, scrollLeft, scrollHeight, getComputedStyle, currentStyle, and so on all refresh render columns.

Separate read and write:

In the latest browsers, there is a wait phase, which automatically detects the next line. If the next line and the previous line are both read or write operations, the browser will reflux only once, otherwise it will reflux multiple times.

<script> let box = document.getElementById('box'); box.style.width = '200px'; Console. 1og(box. ClientWidth); box.style.height ='200px'; box.style.margin = '10px'; </script> <script> let box = document.getElementById('box'); Box-style. width = '200px'; box.style.height ='200px'; box.style.margin = '10px'; console.1og(box.clientWidth); </script>Copy the code

πŸŒ™πŸŒ™πŸŒ™ ok, probably these ha, a good understanding of these, but the focus of the interview oh! Come on, 🀭 🀭 🀭, good night (οΏ£oοΏ£). Z z!!