Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

🧨 Hi, I’m Smooth, a sophomore SCAU front er

πŸ† this article is the essence of my own personal thinking and understanding gathered together after I review the knowledge point and view many articles

πŸ™Œ if the article is wrong, please comment section correction, thank you!

Writing is not easy, thank you for your support!

What you need to know before the text begins

It’s not just a classic interview question, but it covers a wide range of topics, so you can use this question to ask the candidate questions to see the breadth and depth of the candidate’s knowledge of computer networks and browsers.

Without further ado, let’s begin!

I. User input stage

After a user enters a content in the address bar, the browser first determines whether the user enters a legitimate URL or a search content. If it is a search content, the browser synthesizes the URL, and if it is a legitimate URL, it starts loading.

In this case, what exactly are we looking for

Search content

We want to search some content, for example, go to Baidu search engine baidu search for the answer to a question, then the browser will automatically call the default search engine keyword search

The domain name resolves the corresponding IP address

If the URL is a valid one, it indicates that the unified Resource Locator (URL) is used to search for the resource on the corresponding server. In this case, the search is the IP address of the resolved domain name, that is, the mapping between the domain name and the IP address.

This is the second case, which I will refer to as mapping for short

Second, initiate URL request stage

The next section expands on the stage of initiating a URL request

1. Build the request line

The browser process first constructs the request line information and then sends the URL request to the network process via the interprocess communication IPC.

2. The DNS

  1. Look for the browser’s local cache first

  2. Find the cache of the operating system hosts file

  3. If the mapping does not exist in the cache of the local DNS server, return the mapping to the local DNS server. Otherwise, proceed to the next step (99% of DNS resolution ends at this point, because there is a lot of mapping cache in the general local DNS).

  4. As a proxy server, the local DNS server establishes a TCP connection with the root DNS server and sends a request. The root DNS server returns the primary DNS server (gTLD, such as.com and.cn) for the query domain.

  5. The local DNS Server sends a request to the gTLD. The gTLD can find the address of the Name Server that you want to search for the domain Name. The local DNS Server sends a request to the address of the Name Server and obtains the IP address and TTL (Time to live, That is, the survival time of the domain name resolution result in the DNS server), and then make a cache of the result (according to the TTL setting), and then return the result to the browser, the DNS resolution is complete

Name Server is the Server address provided by the concept service provider. For example, if you register a domain Name in Ali Cloud, you can go to the Server of Ali Cloud to search, because you send a request to the Server of the domain Name provider, then you will definitely get the corresponding IP address




3. Wait for the TCP queue

Chrome has a mechanism that allows you to establish a maximum of six TCP connections for the same domain name at the same time. If the number of TCP connections exceeds this number, they must be queued.

For multiplexing, HTTP 1.1 adopts the establishment of multiple TCP connections, and HTTP 2.0 adopts the establishment of a TCP connection to launch multiple requests in parallel




4. Establish the TCP connection

Establish a connection with the server through TCP three-way handshake, and then transfer data.

First handshake: Establish a connection. The client sends a connection request packet segment and sets the SYN position to 1 and Sequence Number to X. Then, the client enters the SYN_SEND state and waits for confirmation from the server.

Second handshake: The server receives a SYN packet segment. Context The server should acknowledge the SYN segment received from the client, and set this Acknowledgment Number to X +1(Sequence Number+1). Set the SYN position to 1 and Sequence Number to y. The server puts all the above information into a packet segment (namely, SYN+ACK packet segment) and sends it to the client. At this time, the server enters the SYN_RECV state.

Third handshake: The client receives a SYN+ACK packet from the server. A. Then set this Acknowledgment Number to Y +1 and send an ACK segment to the server. After this segment is sent, both the client and the server enter the ESTABLISHED state and complete the TCP three-way handshake.

A: I want to establish A connection with you. Do you accept my request?

B: Yes! No problem, but I just need to confirm to you that this is the actual connection you’re going to make with me, not the one you sent a long time ago

A: Yes, no problem. I just sent you this




Why three handshakes? Is twice ok?

An error occurs in case an invalid connection request segment is suddenly sent to the server.

Examples are as follows

Generation of invalid connection request packet segment In this case, the first connection request packet segment sent by the client is not lost, but is detained on a network node for a long time. As a result, it is delayed until a certain time after the connection is released to the server. Originally, this is an invalid packet segment. However, after the server receives the invalid connection request packet segment, it mistakenly thinks it is a new connection request sent by the client. Then the client sends a confirmation message to agree to establish a connection. Assuming that the “three-way handshake” is not used, a new connection is established as soon as the server sends an acknowledgement. Since the client does not send a new connection request, it ignores the server’s confirmation and does not send data to the server. However, Serve R assumes that a new shipping connection has been established and waits for data from the client. As a result, many of the server’s resources are wasted. The three-way handshake prevents this from happening. For example, the client does not issue an acknowledgement to the server’s acknowledgement. When the server receives no acknowledgement, it knows that the client has not requested a connection.”

How about four handshakes?

Yes, but not necessary

The four handshakes simply break down the second handshake into the following two steps

  1. The confirmation bit ACK = 1 is sent, followed by ACK = x + 1
  2. Send SYN = 1, and seq = y




5. Find the cache

After the TCP connection is established, the lookup cache, known as forced cache and negotiated cache, is performed again. If it is found, the server returns the 304 status code and the corresponding cache resource, rather than sending a request to the server for the corresponding resource.

A mandatory cache lookup is performed before the negotiated cache is reached

  • When the browser successfully loads the resource for the first time, the server returns 200. At this time, the browser not only downloads the resource, but also caches the response header(the date attribute in it is very important, which is used to calculate the difference between the current time and date when the same resource is loaded for the second time).

  • The next time a resource is loaded, it is first processed by a strong cache. Strong caching is controlled using the Expires and cache-Control fields in the HTTP header. In a strong Cache, when a request is made again, the browser determines whether the target resource “matches” the strong Cache based on the Expires and cache-control parameters. If so, the browser directly obtains the resource from the Cache without communicating with the server. Cache-control has the highest priority. If cache-control: no-cache, the negotiation of Cache is directly entered. If cache-control: no-cache, the negotiation of Cache is directly entered. Max-age = XXX, the time difference between the current time and the last time 200 was returned will be compared. If the Max age does not exceed, the strong Cache will be hit and the file will be read from the local Cache without a request. If it expires, it goes to the next stage, negotiating the cache;

  • In the negotiation cache phase, if-none-match and if-Modified-since requests are sent to the server. The former has a higher priority than the second, so the first relation is if-none-match and the Etag of the response header. The server compares the values of the two fields and, if they are the same, matches the negotiated cache and returns 304; If not, change it, return the new resource file with the new Etag value and return 200.

  • The second relation of negotiation cache is if-modified-since and last-modified. If the value of if-modified-since sent by the client is consistent with the time of the Last modification of the file obtained by the server, the negotiation cache will be matched and 304 will be returned. If not, the new last-Modified and file is returned and 200 is returned;

Why is Etag priority higher than last-Modified in negotiated cache?

Because the latter is to identify the resources of the last modification time (not accurate, because the modified files do not represent content changes, may change later dropped), the former can be understood as the unique identifier is a resource, is the server through the built-in algorithm based on hash value generated by the file contents, so a more accurate, of course, because computing performance overhead is bigger, Etag is not recommended

Process knowledge

What is thefrom disk cache ε’Œ from memory cacheWhen will it be triggered?

  • Strong caching is triggered, roughly explained as follows:

  1. First look up memory, if memory exists, load from memory;

  2. If it is not found in the memory, obtain it from the hard disk. If it exists in the hard disk, load it from the hard disk.

  3. If you can’t find it on your hard drive, make a network request.

  4. Loaded resources are cached to hard disk and memory;

What is a heuristic cache and under what conditions is it triggered?

Heuristic caching:

If no Expires, cache-Control: max-age, or cache-Control: s-maxage is shown in the response, and the response contains no other caching restrictions, the Cache can use a heuristic to calculate the freshness life. The cache time is usually based on two time fields in the response header Date minus 10% of the last-Modified value.

// Date minus 10% of last-modified value as cache time. Response_is_fresh = Max (0, (date-last-modified)) % 10Copy the code

Are you feeling a little tired seeing this? Hold on! There is more knowledge to explore!




6. Initiate an HTTP request

The browser first sends a request line to the server, which contains the request method, request URI and HTTP version. It also sends a request header to tell the server some information about the browser, such as the browser kernel, request domain name, Cookie and other information.

7. The server processes the request

The server first returns the corresponding line, including the protocol version and status code, and then returns the response header containing the returned data type, cookies to be saved by the server on the client, etc. Generally, it returns HTML, CSS, JS and Image files

8. Disconnect the TCP connection

When the data transfer is complete, disconnect the connection by waving the hand four times.

When a client establishes a TCP connection with a server through a three-way handshake, it is necessary to disconnect the TCP connection when the data transfer is complete. For TCP disconnections, there is the mysterious “four waves”.

First wave: Set the Sequence Number for host 1 (either the client or the server) to send a FIN packet to host 2. At this point, host 1 enters the FIN_WAIT_1 state. This means that host 1 has no data to send to host 2.

Second wave: Host 2 receives the FIN segment from host 1 and sends an ACK segment back to Host 1. This Acknowledgment Number is set to Sequence Number plus 1. Host 1 enters the FIN_WAIT_2 state. Host 2 tells host 1 that I “agree” to your shutdown request;

Third wave: Host 2 sends a FIN packet to host 1 to close the connection, and host 2 enters the LAST_ACK state.

Fourth wave: Host 1 receives the FIN packet from host 2 and sends an ACK packet to host 2. Then host 1 enters the TIME_WAIT state. Host 2 closes the connection after receiving the ACK packet from host 1. If host 1 does not receive a reply after waiting for 2MSL, then the Server is shut down.

A: I’m going to disconnect

B: Ok, you disconnect it first, and THEN I will disconnect it after I transfer my data to you

After a while, when B is done

B: I’m done. I can disconnect from you, too. Do you hear me

A: I know you are also disconnected, you disconnect first, I will disconnect after 2MSL, otherwise you can’t hear what I say to you




Why do you wave four times?

TCP is a connection-oriented, reliable, byte stream – based transport-layer communication protocol. TCP is in full-duplex mode. When host 1 sends a FIN packet, it only indicates that host 1 has no data to send. Host 1 tells host 2 that all data has been sent. However, at this point, host 1 can still accept data from host 2; When host 2 returns an ACK packet, it indicates that it knows that host 1 has no data to send, but host 2 can send data to host 1. When host 2 also sends a FIN packet segment, host 2 also has no data to send, and tells host 1 that it has no data to send, and both parties happily break the TCP connection.

Why wait for 2MSL?

MSL: The maximum lifetime of a packet segment, which is the maximum time that any packet segment is in the network before being discarded. There are two reasons:

  • Ensure that TCP full-duplex connections can be closed reliably
  • Ensure that duplicate data segments are removed from the network

First point: If host 1 is directly CLOSED, host 2 does not receive the final ACK from host 1 due to the unreliability of IP protocol or other network reasons. Then host 2 will continue to send the FIN after the timeout. In this case, because host 1 is already CLOSED, the connection corresponding to the resending FIN cannot be found. Therefore, host 1 does not directly enter CLOSED, but holds TIME_WAIT to ensure that the host receives an ACK when it receives a FIN again and closes the connection correctly.

Second point: if host 1 closes directly and then initiates a new connection to host 2, we cannot guarantee that the new connection will have a different port number from the one just CLOSED. This means that the new connection may have the same port number as the old connection. In general, there is no problem, but there are some special cases: Suppose a new connection and has closed the old connection port number is the same, if the previous connection remain some of the data in the network, these delays data after establishing new connections to host 2, due to the new and old connections port number is the same, the TCP protocol is considered the delay data belongs to a new connection, This will confuse the packet with the actual new connection. Therefore, the TCP connection must wait in TIME_WAIT state for 2x MSL to ensure that all data of the connection disappears from the network.

The content of three shakes and four strokes is very thorough in The book Computer Network by Xie Xiren. If you have time, you can refer to it




3. Prepare the rendering process stage

  1. The network process parses the retrieved data and determines the type of the response data according to the Content-Type in the response header. If it is a byte stream, it sends the request to the download manager for downloading. If it is a text/ HTML type, it informs the browser process that it has received HTML and is ready to render.
  2. In general, each TAB page in the browser corresponds to a renderer. If a new page is opened from the current page and belongs to the same site, the renderer will be reused. In other cases, a new renderer will be created.

The concept of security sandbox and site isolation can be introduced to those who need it

Iv. Document submission stage

  1. When the renderer process is ready, the browser will send a message to submit the document to the renderer process. After receiving the message, the renderer process will establish a data transmission channel (IPC) with the network process. After the document data transmission is completed, the renderer process will return a message confirming the submission to the browser process.
  2. When the browser receives a message confirming the submission, it updates the browser’s page status, including the security status, URL of the address bar, historical status of forward and backward, and updates the Web page to blank.

5. Page rendering stage

In short, it can be summarized as the following stages

After the HTML is returned, the HTML is parsed, then CSSOM + domTree = HTML, then layout and draw

  • Construct a DOM tree: Parse AN HTML document from top to bottom to generate a DOM tree, also known as a content tree.
  • Build the CSSOM(CSS Object Model) tree: Load the parsing style to generate the CSSOM tree;
  • Execute JavaScript: Load and execute JavaScript code (including inline code or an external JavaScript file);
  • Construct the render tree: generate the render tree according to the DOM tree and CSSOM tree;
  • Render tree: A sequence of rectangles displayed on the screen in order, with visual properties such as font, color, and size.
  • Layout: Each node of the node tree is placed in the correct position on the screen according to the render tree;
  • Painting: Traverse the render tree to draw all nodes and apply the corresponding style to each node. This process is done through the UI back-end module.

In detail

  1. After the document is submitted, the renderer process begins page parsing and loads the child resources.

  2. Building a DOM tree: The HTML is parsed and output is a DOM with a tree structure with document as the top node.

  3. Style calculation: Convert external styles from the Link tag, styles in the style tag, and styles on elements into a style sheet that the browser can understand. Then standardize the values of attributes in the style sheet, such as color:red to the RGB form of color. Then the specific style of each node of the DOM tree is calculated according to the inheritance and cascading rules of CSS.

  4. Layout phase: A layout tree with only visible elements is generated, and the location and size of each node in the layout tree is calculated.

  5. Layering: Create layer trees for complex effects such as 3D transformations, page scrolling, or Z-order.

  6. Draw: Generate a draw list for each layer and submit it to the composition thread.

  7. Rasterization: To generate bitmap data by prioritizing blocks within the visual window.

  8. Compositing: the page is displayed after all blocks have been rasterized.

conclusion

It can be summarized as follows: 1. After the network thread obtains the HTML data, it passes the data to the main thread of the renderer process through IPC. The main thread parses the HTML to build a DOM tree, and then conducts style calculation. Generate a Layout tree according to the DOM tree and the generated style, by traversing the Layout tree to generate the drawing order table, and then traversing the Layout tree to generate the Layer tree. 2. The main thread passes the Layer tree and the drawing order information to the synthesizer thread. The synthesizer thread divides the layer into smaller tiles and passes them to the raster thread for rasterization. 3. After the completion of rasterization synthesizer thread will receive rasterization thread transmitted draw Quads block information, according to these information, synthesizer line synthesized a synthesizer frame. Then the synthesizer frame is transmitted to the browser process through IPC, and the browser process is transmitted to the GPU for rendering, and finally displayed on the screen.

About page rendering blocking

As the browser parses and renders DOM elements in the main thread, it will not block browser rendering when downloading images, CSS and other files, but JS is different. When the browser encounters JS introduced by the

Resulting problems

Browser rendering (layout and drawing) and JS file processing take up the main thread, but if the JS file is very large and takes a long time to download and execute, we all know that when the page is refreshed at 60 frames per second, the user will not feel the page is stuck. When the browser wants to draw the next frame of the page, the control of the browser main thread cannot be returned in time, so it will lead to the problem of unable to draw the next frame in time. At this time, the intuitive feeling for our users is that the page is stuck.

After each frame is drawn, there is still time left

When JS is too large





What’s the solution?

You can think about it first, and then check the RQ1 for a solution after a period of time

I recommend watching this video on the browser rendering process




The problem summary

A & Q1: Solution to browser rendering stutter

1. Can be achieved byrequestAnimationFrame()To solve the

This is the official API browser, this method will be called on each frame, through the API callback, we can run the JS tasks into smaller tasks faster (assigned to each frame), before each frame time out suspended JS, returned to the main thread, so at the beginning of the next frame, the main thread can perform the layout and drawing on time

React Fiber, the latest rendering engine, uses this API to make a lot of optimizations.

2. To<script>Tag along withasync ζˆ– deferattribute

  • Async: asynchronous execution. When the browser is rendering, it can download the JS file corresponding to

  • Defer: The JS file will be downloaded and executed only after the browser has drawn the entire page layout

3. There is an animation property in CSStransform δΊ†

Since the entire process of rasterization does not occupy the main thread, it is only executed in the following synthesizer thread + raster thread, which means that it does not need to rob the main thread with JS. If we repeatedly rearrange and redraw, it may cause frames to drop, because JS execution may block the main thread. The transform animation will not go through layout and drawing, but directly run in the synthesizer thread and grid thread, so it will not be affected by JS execution in the main thread, so it saves a lot of time and reduces the pressure of the main thread.





A & Q2: Will CSSOM render block DOM rendering and dom tree establishment?

Yes, no.

When a stylesheet is downloaded in the background, JavaScript can still execute because the main thread is not blocked by the loaded stylesheet. If our JavaScript program accesses the CSS attributes of a DOM element (through the CSSOM API), we get an appropriate value (based on the current state of CSSOM). But once the stylesheet is downloaded and parsed, resulting in a CSSOM update, our JavaScript now has an outdated CSS value for the element, because the new CSSOM update may have changed the CSS properties of that DOM element. For this reason, it is not safe to execute JavaScript while downloading stylesheets, and JS usually does something that affects DOM rendering.

Just as the async or defer attributes prevent script elements from blocking parsing, external stylesheets can also prevent them from blocking rendering through the Media attribute. Using the media property value, the browser can intelligently decide when to load the stylesheet

A & Q3: Methods for page rendering optimization

  • HTML document structure as few as possible, preferably no deeper than six layers;
  • Script as far as possible after put, put before can;
  • A small number of front-screen styles are placed inline in the label;
  • The style structure hierarchy should be as simple as possible;
  • Minimize DOM operations in scripts and cache DOM access style information to avoid excessive backflow.
  • Reduce the use of JavaScript code to modify element styles and use class names to manipulate styles or animations.
  • Animation should be used on absolutely positioned or fixed positioned elements;
  • Hide out of the screen, or when the page is scrolling, try to stop the animation;
  • Cache DOM lookup as much as possible, and make the finder as simple as possible;
  • For websites with multiple domain names, you can enable domain name pre-resolution

A & Q4: At what stage does strong and negotiated caching occur?

Strong and negotiated caching occurs during the initiating URL request phase, where the cache is looked up after the request row is built.

A & Q5: Do ports need DNS resolution in DNS resolution?

No, because HTTP uses port 80 by default and HTTPS uses port 443 by default. If you want to specify a port, you can add it to the URL directly.

A & Q6: Which of the above stages can be optimized?

1. Optimize DNS query: DNS preresolution

DNS optimization for the front end can write DNS cache addresses in the header of HTML pages, such as

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
Copy the code

2. Optimize THE TCP connection: The keep-alive header is used to optimize the TCP connection.

keep-alive: connection
Copy the code

After this TCP request ends, do not actively disconnect, the next time you need TCP connection will be saved, directly in the TCP pipeline transmission can be

That is, the TCP connection establishment process of the three-way handshake is saved

3. Optimize HTTP response packets by using CDN and Gzip.




A & Q7: What are the common HTTP request headers?

  • User-AgentBrowser Type
  • Content-TypeMessage type
  • ConnectionWhether to close the TCP connection after the transmission is complete
  • HostAccessing host Domain names
  • Content-LengthThe length of the content
  • AcceptThe type of data allowed to receive
  • Accept-LanguageLanguages that are allowed to be received
  • CookieUser identifier
  • cache-controlStrong cache constraints, lifetime
  • expiresThe strong cache constraint has been replaced by the one above
  • etagNegotiate cache limits, expiration time
  • last-modifiedNegotiates cache restrictions and modifies the time last
  • datetime

Wait, there are many more, I won’t list them all

The last

I’m Smoothzjc, dedicated to producing more good articles than just the front end

You can also pay attention to my public account @smooth front-end growth record, timely through the mobile terminal to get the latest article news!

Writing is not easy, thanks for your support ❀

Phase to recommend

React Hook: How to Learn React Hook in 2022

A rare Webpack study Guide (10,000 words to get you started with Webpack and master common advanced configuration)

“[Offer Harvester CSS Review series] Please explain what IS BFC? What are its application scenarios?”

Github + Hexo Implement your own personal blog, Configuration theme (super detailed)

10 minutes to thoroughly Understand how to configure subdomains to deploy multiple projects

This article explains how to configure pseudo static to solve the 404 problem of deployment project refresh page

Learn common horizontal and vertical Centered interview questions in 3 minutes

【 Suggested collection 】 a summary of git common instructions!! Suitable for small white and want to understand the basic instructions of Git at work.

A brief introduction to javascript prototypes and prototype chains