If you have been interviewed many times, you will often see this question. Here I will write down the content that will happen at this stage. At the same time, I will tell you what other knowledge points can be extended to guide the interviewer to ask these questions
1. Build the request
Browser by entering the url to parse what to request protocol, build request message, here to build is the HTTP request message HTTP request message including message header and a message subject, for the request message, a message first including request line and a variety of first field, and the response message, the message first including the status line and a variety of first field
Request line: GET/HTTP/1.1 (request method and corresponding protocol) Status line: HTTP/1.1 200 OK (corresponding protocol and status code) various header fields: Such as cache-Control and Expires mentioned above, and if-no-match, if-Modified-since, Etag and other packet bodies: There is No data in get request, data sent to the server in POST request, and content returned by the server to the client in response packet
Here is the request header field corresponding to www.baidu.com
2. Strong/local cache lookup
In HTTP1.0, expires takes precedence over cache-Control. In HTTP1.1, the opposite is true. If the cached resource has not expired, Use a locally cached resource, return a status code of 304, and if the resource has expired, proceed. The priority relationship between two HTTP versions is not clear.
Strong caching of relevant content
Strong caching is controlled by either the Expires or cache-Control fields in the return header, both of which represent the Cache lifetime of the resource.
Expires is the HTTP 1.0 specification, and the value is a point-in-time string in the GMT format, such as Expires:Mon,18 Oct 2066 23:59:59 GMT. This time point represents the time when the resource expired, and if the current timestamp is before this time, the cache is judged to have been hit. One disadvantage is that the outage time is an absolute time, which can lead to cache clutter if the server time deviates from the client time significantly. It’s not uncommon for the server’s time to be different from the user’s actual time, so Expires can be a bit of a problem in practice.
Cache-control is the HTTP 1.1 specification, and is generally used to determine the max-age value of this field, which is a relative time, for example
Cache-control :max-age=3600 Indicates that the validity period of the resource is 3600 seconds. The Date in the return header indicates the time when the message is sent, indicating that the current resource is valid from Date to Date +3600s. However, in practice, I often encounter that after setting max-age, when I revisit the resource in max-age time, I return 304 Not Modified. This is because the server time is different from the local time. Of course, there are several other cache-control values that can be set, but they are relatively rare: no-cache does not use local caching. A negotiated cache is required. No-store directly disallows the browser to cache data and asks the server for a full resource each time it requests a resource, similar to the disabled cache in network. Public can be cached by all users, including end users and middleware proxy servers such as CDN. Private can only be cached by the end user’s browser. Cache-control takes precedence over Expires if both exist.
3. The DNS
When we request, the requested address is an IP address, so to convert the URL we wrote into an IP address, we need DNS resolution. During the resolution, first check whether the local DNS server has an IP address corresponding to the corresponding domain name, if so, directly return the request for the IP address. If not, According to the address the root name servers by request, get the corresponding to the top-level domain name server address, to the top-level domain name server request, get the corresponding permissions corresponds to the domain name server address, and then return the IP address of the final return, not only will return to the request, will also be the address cache to the local DNS server
4. Establish the TCP connection
After get the IP address of the corresponding, is we know where the server, so for the HTTP request, the next step is to initiate the TCP connection first, we must carry on the three-way handshake to establish a TCP connection First started the client and the server process of TCP is CLOSED (CLOSED) state, by the client take the initiative to open the connection, The server passively opens the connection.
- First handshake: the client creates the transmission control module TCB first and sends the connection request message segment when establishing the connection, with SYN=1 in the header and an initial serial number seq= X. The TCP client process enters the SYN-sent state.
- Second handshake: After receiving a connection request packet, if the server agrees to confirm the connection, it sends an acknowledgement packet to the client. In the acknowledgement packet, set ACK and SYN to 1, ACK = X +1, and an initial sequence number seq= Y. In this case, the TCP server process enters the SYN-RCVD state
- Third handshake: After receiving the confirmation packet from the server, the client sends an acknowledgement packet to the server. The ACK of the acknowledgement packet is set to 1, ACK = Y +1, and its serial number seq=x+1. The client enters the ESTABLISHED state. And enter the ESTABLISHED state
(Here’s why three handshakes are necessary, and what happens if you miss a third one.)
5. Initiate an HTTP request
After the TCP connection is established, HTTP request packets can be sent from the browser to the server
After the HTTP request packet is prepared, it sends an HTTP request to the server and waits for the server to return a response packet
Depending on how the HTTP connection is made, this process can be handled differently
Short connection
If it is a short connection, after the HTTP request is sent and the response is received, the TCP connection is closed four times and the HTTP connection is re-established on the next connection, which is the default connection mode in HTTP1.0
A long connection
In the case of a long connection, the TCP connection is not closed after the HTTP request is sent and the response is received. Instead, the TCP connection continues to send HTTP requests through the connection. The connection can be closed by negotiating with the server. This can be determined by whether the connection value is keep-alive or not. If the server wants to explicitly disconnect, set the connection value to close. Is not parallel, also that said, can only wait for a request to get response to launch the next request, if one request need a long time, then it will block all requests And, of course, we can use a parallel HTTP connections to solve this problem, so that we can launch several requests at the same time, but still can cause many handshakes, And the amount of parallelism is limited to the number of HTTP connections established.
Long connections are the default connection mode in HTTP1.1. To use them in HTTP1.0, simply add keep-alive to the Connection field
Connection reuse
In HTTP2.0, connection multiplexing has been introduced, allowing parallel HTTP requests to be made within a TCP connection. This eliminates the problem of long connections.
In addition, if you are familiar with cookies, you can add a sentence here, if there is a corresponding cookie, the request will be automatically sent with cookies, of course, also divided into which requests, Also mention that the Chrome80 release in February changed the default setting of the cookie’s SameSite property from none to Lax, causing some requests to fail to automatically carry cookies, and see if the interviewers will follow up later…
6. Negotiate cache
After the HTTP request is made, the resource obtained is not necessarily the latest resource. We need to negotiate the cache to determine whether to use the cache. By adding if-Modified-since and if-none-match fields to the request, the server confirms whether to continue using the cache for the current resource
Negotiate the cache
In simple terms, the negotiated cache confirms to the server whether the current resource continues to be cached by adding if-Modified-since and if-none-match fields to the request.
Negotiated caching is where the server determines whether cached resources are available. It mainly involves two pairs of attribute fields, both of which appear in pairs. That is, the response header of the first request carries a word, last-Modified or Etag, and the subsequent request carries the corresponding request field, if-Modified-since or if-none-match. If the response header does not have a Last-Modified or Etag field, the request header does not have a corresponding field.
Last-modified/if-modified-since Both values are time strings in GMT format. Last-modified indicates the time when the file was Last Modified. The next time a request is made, The request header will carry the if-modified-since value, which is last-modified to tell the server when the file was Last Modified locally. The server will determine whether the resource has changed based on the Last modification time of the file. If the file has Not changed, 304 Not Modified is returned. The request does Not return the resource content and the browser uses the local cache directly. When the server returns a 304 Not Modified response, last-Modified is Not added to the response header to try to update the last-Modified local cache, because since the resource has Not changed, Last-modified does not change; If the resource has changed, the resource content is returned as normal, the new Last-Modified is returned in response header, and the last-Modified local cache is updated before the next request. If-modified-since enables the updated last-modified.
Etag/ if-none-match values are unique identifiers generated by the server for each resource. This value will change whenever the resource changes. The server calculates a hash value from the file itself and returns it to the browser in the ETag field. Upon receiving the if-none-match field, the server determines whether the file contents have been changed by comparing the two fields. Unlike last-Modified, when the server returns a 304 Not Modified response, the response header returns the ETag that was recalculated on the server, even though the ETag is unchanged.
7. Obtain the response
Through strong caching, negotiation caching, and eventually either in the cache, or on some cached server, or on the source server, we get the response resource and we render it to the page
Server push
In addition, we get a response message here, and possibly a 301 or 302 status code response message. The network process reads the redirected address from the Location field in the response header, makes a new HTTP or HTTPS request, and starts all over again (I won’t go into permanent and temporary redirects here).
Here is actually can mention cross domain, the last time I interview asked request images to display, said a sentence with img SRC attribute to get a picture does not cause cross domain, then ask a sentence you said just now the cross-domain, tell me about cross domain (guide success. JPG) (about the content of the cross-domain solutions can write an article again… I won’t go into too much here.)
Build a DOM tree
Since we’re asking for an HTML file, and in fact, the browser can’t understand and use HTML directly, we need to parse it into a deconstruction that the browser can understand – a DOM tree. We can try converting the following HTML content into a DOM tree
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<p><span>Emphasis on the</span>Rendering process</p>
<div>
<div>div</div>
<p>p</p>
</div>
</body>
</html>
Copy the code
9. Style calculation
Style calculation is to calculate the specific style of each element in a DOM node
1. Convert CSS to a structure that browsers can understand
So let’s first decide, where do you get your CSS styles from
- The style of the tag
- The CSS file referenced by link/@import
- The CSS style inside the style tag
- The CSS style embedded in the element
When the rendering engine receives these CSS styles, it converts them to stylesheets and we can see the structure by using Document. stylesheets in the console
2. Transform property values in the stylesheet to standardize them
Font-size: 16px; font-size: 16px; font-weight: bold; color: red; Bold converts to a specific value, red converts to RGB (255,0,0) and so on
3. Calculate the specific style of each DOM
As mentioned above, styles can be obtained from four sources, and in these four sources, the style of the same element can be set repeatedly, so we need to calculate the specific style of each element in this step. The specific style is related to CSS inheritance rules and cascading rules
CSS inheritance
The first is CSS inheritance. We know that in CSS, the style of the parent element is directly used as the style of the child element, such as the following style
body{
font-size:20px;
}
Copy the codeIf we don’t font-size the child element in the body, we will use the body style set here. We can check the specific style information by selecting an element in the Element TAB in the controller and going to the styles TAB below. In addition to the style value, You can also see in which file the styles were set and which styles were invalidated/overridden (underlined)
CSS cascade
CSS cascading is a very important rule of CSS. It determines which selector to use when styling an element using multiple selectors. This involves weights for each setting
10. Layout
1. Create a layout tree
After we have the DOM node tree and stylesheets, we are ready to build the layout tree. When we build the layout tree, we need to combine the DOM node tree and stylesheets to iterate through all the visible nodes and add them to the layout tree
When creating the layout tree, make it clear which elements will not be added to the layout tree. For example, everything under the head tag will not be added to the layout tree, and elements with display style of None will not be added to the layout tree
2. Layout calculation
About the layout of the calculation, is not just a simple two-dimensional position calculation, also involves the “three-dimensional” calculation We know that on the page, we can see a two-dimensional display, but in fact, we can also see a lot of elements are overlapping, then, we how to draw the overlap, you need on the z axis perpendicular to the page a layered
layered
Layering caused by the cascading context
Let’s start by looking at the concept of cascading contexts and just briefly describe some of the situations that we see in cascading contexts
- HTML root tag, which is used as a basic level
- Elements whose position is absolute or relative and z-index is not auto will be drawn over the top of our document stream and thus promoted to a layer
- Animation-less than 1 elements can be seen during writing. If the style is transparent, we can see the background content, so this is also an enhancement layer. Similarly, the transparency of filter is also the same
- This is very intuitive when the transform sets translateZ to a non-zero value. It moves the z-axis directly relative to its own level and is promoted to a new level when the layout calculates the layer
In fact, there are other cases, which are not described in detail because they are mainly about the layered content. See MDN for details
As we can see from the above mentioned cascading context, anything that causes overlap, or moves along the Z-axis, causes layering
This also leads to the conclusion that each element with a cascading context is promoted to a separate layer when the browser is layered
To see the effect more visually, let’s take a look at the layering with a snippet of code and the Chrome developer tools
<html>
<head>
<style>
.transform {
transform: translateZ(10px);
}
</style>
</head>
<body>
<p><span>Emphasis on the</span>Rendering process</p>
<div>
<div>div</div>
<p class="transform">p</p>
</div>
</body>
</html>
Copy the codeOpen the browser console, type CTRL + Shift + P, type Layers in the search box, and select Show Layers
transform: translateZ(10px);
transform: translateZ(10px);
Layering caused by clipping
It also causes layering when a page is clipped, for example
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div>
<p>Here we give the external div tag a width of 100px and height of 100px</p>
<p>Also, for a clipping, we set its overflow to Auto to make it scroll bar</p>
</div>
</body>
</html>
Copy the codeOnce again, use Layers to view the layers, enter Layers, and also move to the side view to see the four layers
- The layer that displays the content
- Layer of complete content
- Layer of scroll bar
We can shift the perspective a little bit, and it will be even more obvious
11. Generate the layer drawing list
At this point, the layers are layered and we know exactly where to draw the content, so how do we make a draw
It’s actually quite simple. Let me give you an example
To see this process, we also use Layers in the Chrome developer tool, going back to our first example, go to the # Document layer, select Paint Profiler, open the Profiler screen, and you can see the drawing process
At this point, however, you’re just generating a list of layers to draw, not really drawing
12. Rasterization operation
In fact, the drawing is done by the compositing thread in the rendering engine. After drawing list submitted to the synthesis of the thread, the synthetic thread will layer into multiple blocks and the block diagram is usually the size of the 256 x256 or 512 x512 generated figure block priorities related to our current viewport (one page the user can see the current content), synthetic thread to block near the viewport of graphics priority generated bitmap, The actual operation of generating bitmaps is done by rasterization. The graph block is the smallest unit of rasterization.
Generally, GPU is used to accelerate the generation of bitmaps during rasterization. The process of using GPU to generate bitmaps is called fast rasterization, or GPU rasterization. The generated bitmaps are stored in GPU memory.
GPU operation is run in GPU process, if rasterization operation uses GPU, then the final bitmap generation operation is completed in GPU, which involves cross-process operation.
13. Synthesis and display
Once all the blocks have been rasterized, the composition thread generates a command to draw the block, DrawQuad, and then submits the command to the browser process
The browser process has a component called viz that receives DrawQuad commands from the compositing thread, draws its page contents into memory, and displays them on the screen.
If there is anything missing, please point it out in the comments. Thank you very much!