Preface
Some people say that if you understand how the browser works, you can solve 80% of the front-end problems.
Yes, understanding the working principle of the browser will help your work; and understanding the network protocols such as TCP/IP and HTTP will be of great benefit to your future career development.
Below, I have summarized the questions about browser and network communication that are frequently tested in 4 interviews. I will reorganize the browser, network communication, page rendering, JavaScript, browser security and other knowledge for you, so that you can understand the entire front-end and back-end system. Have a new understanding.
First question: Why does Chrome open a page, there are 4 processes?
Learn to master: the network process in the browser, page rendering process, JavaScript execution process, and Web security theory. Expand the problem below to understand the multi-process architecture:
Multi-process architecture learning
The concept of process and thread is confused
From a computing point of view, single-threading means calculating one after another, and multi-threading means processing multiple calculations at the same time. Multithreading means that the program contains multiple execution streams, that is, multiple different threads can be run at the same time to perform different tasks in a program, that is, a single program is allowed to create multiple parallel executions.
Single thread is an execution flow in the program. Each thread has its own dedicated register (stack pointer, program counter, etc.), but the code area is shared, that is, different threads can execute the same function.
Multithreading is also a program, so threads need to take up memory, and the more threads, the more memory. Multithreading needs to be coordinated and managed, so CPU time is required to track threads; access to shared resources between threads will affect each other, and contention must be resolved The problem of shared resources; too many threads will lead to too complicated control.
When a single thread executes a program, all the programs it walks through are in sequential order, and the previous ones must be processed well before the next ones can be executed. Multi-threaded operation means that there are multiple independent and specific tasks in a process to compete for CPU execution. Macroscopically, it is concurrent, but it is actually time-sharing execution, but the execution time slice is relatively short.
Each running program is a process and contains at least one thread. This thread is called the main thread. It is created when the program starts and is used to execute the main function. A program with only one main thread is called a single-threaded program. A program with multiple threads is called a multithreaded program.
Process is when a program starts to run, it is a process, the process includes the running program and the memory and system resources used by the program (a process is composed of multiple threads)
The advantage of multi-threading is that it can improve the utilization of CPU. In a multi-threaded program, if a thread must wait, the CPU can run other threads instead of waiting, which can greatly improve the efficiency of the program.
Therefore, a thread cannot exist alone, it is started and managed by a process, and a process is a running instance of a program. Threads are dependent on the process, and the use of multi-threaded parallel processing in the process can improve computing efficiency. The data in the process is shared between threads. When a process is closed, the operating system reclaims the memory occupied by the process.
The current multi-process architecture browser Chrome includes 1 main browser process, 1 GPU process, 1 network process, multiple rendering processes and multiple plug-in processes.
so, open a page, why are there 4 processes? Because open 1 page: at least 1 network process , 1 browser process , 1 GPU process and 1 rendering process are required .
Although the multi-process model improves the stability, fluency, and security of the browser, it brings a higher resource usage and a more complex architecture. So, Chrome officially wants to build a system that is more cohesive, loosely coupled, easy to maintain and extend.
Question 2: How does the TCP protocol ensure that the page file can be delivered to the browser completely?
For the network, we know that a file is usually split into many data packets for transmission, and the data packet is very likely to be lost or error in the transmission process, so that the page file is completely delivered to the browser. Necessary.
The following describes these three aspects:
How the data packet reaches the host
How the host forwards the packet to the application
How the data is completely delivered to the application
The data packet is sent from host A to host B. The IP address information of host B and the IP address of host A will be attached to the data packet. These additional information will be loaded into a data structure of IP header (including IP version, Source IP address, destination IP address, time to live, etc.)
These are generally understood by us. The following mainly explains TCP (Transmission Control Protocol). The Transmission Control Protocol is a connection-oriented, reliable, byte stream- based transmission layer communication protocol. In the simplified computer network OSI model, it is completed Functions specified by the fourth transport layer.
User Datagram Protocol (UDP) is another important transmission protocol in the same layer.
In the Internet protocol suite, the TCP layer is above the IP layer, TCP->IP, the middle layer below the application layer, and the application layer -> middle layer. The application layers of different hosts often need reliable, pipe-like connections , but the IP layer does not provide such a flow mechanism, but provides unreliable packet exchange.
In order to ensure that no packet loss occurs, TCP gives each packet a sequence number, and the sequence number also ensures that the packets transmitted to the receiving end entity are received in order. The receiving entity sends back a corresponding acknowledgment message (ACK) for the successfully received packet. If the sending entity does not receive the acknowledgment within a reasonable round-trip delay (RTT), then the corresponding data packet is assumed to have been Lost and retransmitted.
Data is called a stream at the TCP layer
Data grouping is called segmentation
The operation of TCP protocol: connection creation, data transmission, connection termination.
Do you know what TCP is? At this point, most people should only say that it is an agreement.
The TCP transmission control protocol is TCP/IP, one of the main protocols in the transmission control protocol Internet protocol. TCP/IP is a set of communication protocols used to connect the Internet and most other computers on the computer network.
An agreement is a mutually agreed format used to perform something. For computers, it is most commonly used to refer to a set of rules that enable computers to connect to each other and transmit data, called a communication protocol.
TCP is a connection-oriented protocol that establishes and maintains a virtual connection between hosts until a message or a message exchanged by an application program to run on it is exchanged. Data packet is the most basic unit of data transmission on TCP/IP network.
TCP runs on the transport layer and is responsible for maintaining reliable end-to-end communication on the entire network. IP is the network layer protocol, which is the layer directly below the transport layer. The transport layer runs: UDP (User Datagram Protocol), RTP (Real-time Transmission Protocol), SCTP (Stream Control Transmission Protocol).
Connection creation
TCP uses a three-way handshake process to create a connection
The process of the three-way handshake agreement:
a. The client sends a SYN packet to the server, requesting an active opening. The packet carries the random number A set by the client for this connection request as the message column number.
b. After the server receives a SYN packet, it puts the packet into the SYN queue; sends back a SYN/ACK. The ACK confirmation code should be A+1, and the SYN/ACK packet itself carries a randomly generated sequence number B.
c. After receiving the SYN/ACK packet, the client sends an ACK packet, the sequence number of the packet is set to A+1, and the ACK confirmation code is B+1. When the server receives this ACK packet, it removes the request frame from the SYN queue and places it in the ACCEPT queue.
Scenario: When the server receives the SYN sent by the client, and returns the SYN-ACK, the client is disconnected, and the server does not receive the ACK from the client, then the connection is in an intermediate state and it is not successful It did not fail.
However, if the server does not receive TCP within a certain period of time, it will resend the SYN-ACK.
When the host receives a TCP packet, it uses the IP address and port number of both ends to identify which session the TCP packet belongs to.
A table is used to store all the sessions, each of which is called a TCB (Transmit Control Block).
The definition of the TCB structure includes: source port, destination port, destination ip, serial number, response serial number, counterparty window size, client window size, tcp status, tcp input/output queue, application layer output queue, tcp retransmission Related variables, etc.
The number of connections on the server side is unlimited, only limited by memory.
data transmission
There is a pair of sequence number and confirmation number in each TCP segment .
The sender of a TCP message calls the serial number of its own byte stream, and calls the serial number of the byte stream received from the other party as the confirmation number. By using sequence numbers and acknowledgment numbers, the TCP layer can deliver the bytes in the received message segment to the application layer in the correct order.
The TCP protocol uses sequence numbers to identify the order of bytes sent by each end, and the order can be reconstructed by receiving data from the other end, without fear of out-of-order delivery or packet loss of transmitted packets.
Send the confirmation packet acks, which carries the number of the byte stream sent by the receiver (acknowledgement number), and tells the byte position of the data stream that the other party has successfully received.
Packet structure
Let us look at the data packet structure diagram below:
Contains: offset byte, source connection port, destination connection port, serial number, confirmation number, checksum, emergency pointer, etc.
Source connection port, 16 bits long, identifying the sending connection port
Destination connection port, 16 bits long, identifying the receiving connection port
Sequence number (seq, 32 bits long)
Acknowledgment number (ack, 32 bits long), the starting sequence number of the expected received data, that is, the byte length of the received data plus 1
Data offset (4 bits long), the offset value of the start address of the data segment calculated in units of 4 bytes.
Reserved, need to be set to 0
ACK—1 means the confirmation number field is valid
SYN—1 means this is a connection request or a connection acceptance request, used to create a connection and synchronize the sequence number
FIN—1 means that the sender has no data to transmit, and the connection is required to be released
RST—1 means a serious error has occurred. It may be necessary to re-create the TCP connection. Can also be used to reject illegal segments and connection requests
Urgent pointer (16 bits long)—the serial number of the last byte of urgent data in this segment
Window (WIN, 16-bit length)-indicates the number of bytes that the sender of this message can receive starting from the confirmation number, that is, the size of the receiving window. For flow control
Checksum (Checksum, 16-bit length)—Calculate the entire TCP message segment, including the TCP header and TCP data, in 16-bit words. This is a mandatory field
Remember that IP delivers the data packet to the destination host, and the data packet reaches the host. So how do you forward the data packet to the application?
UDP delivers data packets to the application program.
UDP is a protocol developed based on IP that can interact with applications. The user data packet protocol determines which program to deliver the data packet to. IP is only responsible for transmitting the data packet to the other party's computer .
After reading the location, let's briefly compare UDP and TCP below:
UDP: No connection; support one-to-one, one-to-many, many-to-one and many-to-many interactive communication; directly package the messages delivered by the application layer; try best to deliver, that is, unreliable; do not use flow control and congestion Control; the header overhead is small, only 8 bytes.
TCP: connection-oriented; each TCP connection can only have two endpoints EP, only one-to-one communication; byte-oriented; reliable transmission, using flow control and congestion control; the minimum header is 20 bytes, the maximum is 60 bytes .
The most important point of UDP is the port number, because UDP distributes data packets to the correct program through the port number . UDP cannot guarantee the reliability of the data, but the transmission speed is fast.
The important explanation is: How is the data completely delivered to the application?
TCP is the complete delivery of data to the application.
TCP is a connection-oriented, reliable, byte stream-based transport layer communication protocol . It provides a retransmission mechanism and introduces a packet sorting mechanism (TCP header, which provides a sequence number for sorting, is used to rearrange data by sequence number package).
Speaking of TCP connections, we must talk about the three-way handshake of TCP/IP that we often interviewed to establish a connection; wave four times to disconnect .
Three handshake diagram:
Completed the three TCP handshake:
The girlfriend sent the boyfriend: "Are you there?" The boyfriend replied to the girlfriend: "I am!" The girlfriend replied to the boyfriend: "I see!"
Now the boyfriend knows.
Four waved pictures:
Complete four waves:
The girlfriend sent the boyfriend: "Break up!" The boyfriend replied to the girlfriend: "Uh?" The boyfriend replied to the girlfriend: "Seriously?" The girlfriend replied to the boyfriend: "Seriously!"
At this time, the girlfriend deleted her boyfriend's WeChat.
According to the three handshake and four waved hands I described, I believe you understand, haha!
The third question: HTTP request process, why do many sites open so quickly for the second time?
Speaking of HTTP protocol, it is built on the basis of TCP connection, hypertext transfer protocol, HTTP is an application layer protocol for distributed, collaborative and hypermedia information system, HTTP is the basis of data communication in the World Wide Web .
Someone said: If you want to learn a browser well, you must have a deep understanding of HTTP.
Browser using HTTP protocol as an application layer protocol, to request the text information package, using TCP / IP as a transmission transport layer protocol to send it to the network ( the contents of the data transmitted by the http TCP phase to achieve ).
Domain name and IP address - mapping between the domain name to IP mapping system called "Domain Name System", Jane said DNS.
The Domain Name System DNS is a service of the Internet. As a distributed database that maps domain names and IP addresses to each other, it can make it easier for people to access the Internet.
Domain name such as: dadaqianduan.cn (URL address)
The IP address is: xx.233.xxs.12 (access)
First of all, in the first step, the browser will request DNS to return the IP corresponding to the domain name. The browser also provides DNS data caching service. If a domain name has been resolved, the browser will cache the resolved structure, and it will be directly in the next query. Use, reduce a network request. After getting the IP, you need to get the port number. If the url does not clearly indicate the port number, the HTTP protocol defaults to port 80.
At this step, the IP and port number are clear and clear. So let me talk about the description of the HTTP protocol , here is added for a better understanding:
HTTP is a standard for request and response between client and server. TCP protocol is usually used. By using web browser, web crawler or other tools, the client initiates an HTTP request to the specified port on the server. The default port is 80 .
Some resources are stored on the responding server, such as HTML files and images. The source server; (the client is called a user agent), there may be multiple "middle layers" between the user agent and the source server, such as proxy servers, gateways, Tunnel etc.
so, the HTTP server listens to the client's request on the port. Once the request is received, the server will return a status to the client, such as: "HTTP/1.1 200 OK", and the returned content, such as the requested file, error message, or other news.
Let me answer here first: the browser initiates the HTTP request process: 1. Build the request (build the request line information); 2. Look up the cache (the browser cache is a way to save a copy of the resource locally for direct use in the next request Technology); 3. Prepare IP address and port; 4. Wait for TCP queue; 5. Establish TCP connection; 6. Send HTTP request.
Then the server processes the request, the server returns the request and disconnects.
In fact, after the port and IP address are ready, it is not necessary to directly establish a TCP connection, because there is a mechanism in Chrome, that is, the same domain name can only establish a maximum of 6 TCP connections at the same time. If there are 10 requests under the same domain name at the same time Occurs, then 4 of the requests enter the queue waiting state.
If the number of requests is less than 6, it goes directly to establish a TCP connection.
Send HTTP request
The above is a preliminary, so how does the browser send the request information to the server?
Here is a picture of post request packet capture:
Lai Zhang browser sends a request to the server to receive the return process:
Description: The user enters the requested url address in the browser, the core code inside the browser will split the url and finally send the domain to the DNS server, and the DNS server will query the corresponding corresponding ip address according to the domain. Thereby returning the IP address to the browser.
Once the browser has the ip address, it will know where the request is sent. Go through (LAN, switch, router, backbone network) to the server.
Friends who know HTTP frequently should understand the above expression, then look at the HTTP request data format (see the above picture -> a post request packet capture diagram):
HTTP request data format :
The browser first sends a request line ( request method; request URI; HTTP protocol version ) to the server-to tell the server what resources the browser needs. The commonly used request method is GET, and the request header (used to tell some basic information of the browser-browser The operating system, browser kernel and other information used, as well as the domain name information of the current request, the cookie information of the browser, etc.), the request body (such as the commonly used POST, which is used to send some data to the server, and the prepared data is through the request body To send).
Server processing HTTP request process :
Return request;
Disconnect;
Redirect.
View the returned request data, -i, get the returned response line (including protocol version and status code), response header, and response body data.
Under normal circumstances, the server returns the requested data to the client, and the TCP connection must be closed. But this field is added to the header information: Connection: Keep-Alive, so that the TCP connection is still connected and can continue to send requests on the same TCP connection, which can save the time required to establish a connection for the next request.
In fact, when the request is returned, the connection is gone, but there is a URL that you open in the browser and find that the final page address is different. That is because there is a redirect operation.
As shown in the figure: -I means that only the response header and response line data need to be obtained
The redirected address in the location field;
The difference between status code 301 and 302
301 Moved Permanently The requested resource has been permanently moved to a new location, and any future references to this resource should use one of several URIs returned by this response. If possible, the client with the link editing function should automatically modify the requested address to the address returned from the server. Unless otherwise specified, this response is also cacheable.
302 Found The requested resource is now temporarily responding to the request from a different URI. Since such redirection is temporary, the client should continue to send future requests to the original address. This response is cacheable only if it is specified in Cache-Control or Expires.
Literal difference: 301 is a permanent redirect, and 302 is a temporary redirect
A 302 redirect is a temporary redirect. The search engine will grab the new content and retain the old address. Because the server returns 302, the search engine considers the new URL to be temporary.
A 301 redirect is a permanent redirect. When the search engine fetches new content, it also replaces the old URL with the redirected URL.
Next, let us sort out the HTTP version number. I believe that in the learning process, everyone also wants to know.
HTTP/0.9：
Obsolete. Only the request method GET is supported, and only HTML format resources can be requested, the version number is not specified in the communication, and the request header is not supported.
HTTP/1.0：
This is the first HTTP protocol version that specifies the version number in the communication, adding request methods POST and HEAD; it is no longer limited to the 0.9 version of the HTML format, and can support multiple data formats according to Content-Type; including status code (status code), multi-character set support, multi-part type, authorization, cache, content encoding, etc.
Version 1.0: Only one request can be sent per TCP connection. When the server responds, this connection will be closed. The next request needs to establish a TCP connection again.
HTTP/1.1：
Continuous connection is used by default (TCP connection is not closed by default and can be multiplexed by multiple requests without declaring Connection: keep-alive), which can work well with proxy servers.
One TCP connection can allow multiple HTTP requests
The pipeline mechanism is added , allowing multiple requests to be sent at the same time in the same TCP connection, which increases concurrency and further improves the efficiency of the HTTP protocol
Version 1.1 stipulates that it is not necessary to use the Content-Length field, but to use "chunked transfer encoding"-as long as the header information of the request or response has a Transfer-Encoding field, it indicates that the response will consist of an undetermined number of data blocks. Transfer-Encoding: chunked
Added request methods PUT, PATCH, OPTIONS, DELETE, etc.
Block transfer coding: It is a data transmission mechanism in the hypertext transfer protocol. It allows HTTP data sent by the web server to the client application to be divided into multiple parts. The block transfer coding is only available in HTTP protocol version 1.1 (HTTP/1.1). ).
In the same TCP connection, all data communications are carried out in order. The response is slow, there will be many requests queued up, causing "head of line jam".
HTTP/2：
It was officially released as an Internet standard in May 2015. The duplex mode is added, that is, not only the client can send multiple requests at the same time, the server can also process multiple requests at the same time, which solves the problem of congestion at the head of the line.
Using multiplexing technology, the same connection can process multiple requests concurrently, and the number of concurrent requests is several orders of magnitude larger than HTTP 1.1.
Increase the server push function, the server actively sends data to the client without request.
The difference between HTTP1.1 and HTTP1.0 protocol:
Cache processing
Bandwidth optimization and use of network connection
Management of error notifications
Message sending in the network
Internet address maintenance
Security and integrity
At the end, why did the second site open so fast?
The reason is that some time-consuming data is cached during the first page loading process. The main caches include DNS cache and page resource cache.
Browser cache
When sending a request for the first time, the server returns an HTTP response header to the browser, the browser will set whether to cache the resource through the CacheControl field in the response header. Generally, a cache time needs to be set, Cache-Control:Max-age=2000. When the cache is not expired, when sending a request to request the resource, the resource in the cache will be directly returned to the browser. If the cache expires, the browser will continue to initiate network requests.
Fourth question: What happened when I entered the URL to the page display?
Simply put:
The main browser process submits the URL to the network process
The network process requests the server and returns the response header to determine whether redirection is required
The network process submits the response resource of the page type to the rendering process
The rendering process is over, and the loading is complete
A simple step by step is:
The first is domain name resolution
Establish TCP link
Create Http request
Server handles Http request
Close TCP connection
Browser parsing resources
Browser rendering page
I also talked about it on my GitHub: the steps from entering the url from the browser address bar to displaying the page https://github.com/webVueBlog/interview-answe/issues/27
At the end of this article, I will leave you with an interview question, which is mentioned above: "From the URL input to the page display, what is sent in the middle?" This question, if you are interviewed, how do you answer it?
If you are an interviewer, what should you test?
Read the information
The working principle and practice of the browser
https://time.geekbang.org/column/intro/100033601
to sum up
The above is what I will talk about today. This article briefly introduces the Chrome process, sorts out the TCP and HTTP protocols, understands the three-way handshake, four-time wave process, thank you for reading, if you think this article is helpful to you, you are also welcome to take it Share with more friends.
—————END—————
Friends who like this article, welcome to follow the official account programmer Xiaohui , and watch more exciting content
点个[在看]，是对小灰最大的支持！