What happens from the time you enter the URL to the time the page loads?

This is an important question because the rest of the article will use this answer as a skeleton. Let’s briefly review this classic process from the perspective of performance optimization: First, we resolve the URL to the corresponding IP address through DNS, and then establish a TCP network connection with the server whose IP address is determined. Then we throw our HTTP request to the server, and the server returns the target data to the client in the CORRESPONDING HTTP after processing our request. The browser that gets the corresponding data can start the rendering process. After rendering, it can be presented to the user and wait for the corresponding user action (as shown below).

We divided this process into the following process fragments:

  • The DNS
  • A TCP connection
  • HTTP request Throwing
  • The server processes the request and HTTP returns it
  • The browser takes the data, parses the response, and presents the results to the user

We keep in mind that any of our clients’ products need to take these 5 processes into account in their own performance optimization scheme, repeatedly weighing, so as to polish the speed of user satisfaction

From principle to practice: attack one by one

So what we’re going to do is we’re going to break down these five processes, and we’re going to ask questions and we’re going to break them down.

Specifically, DNS parsing takes time. Can you minimize the number of parsing times or make the parsing front-loaded? Yes – browser DNS cache and DNS prefetch. TCP every three handshakes are anxious death, is there a solution? There are — long links, pre-links, access to the SPDY protocol. If both of these optimizations are often done in collaboration with the team’s server engineers, with limited front-end effort, what about HTTP requests? We should be experts at reducing the number and volume of requests! In addition, the farther the server is, the slower a request is. Would it be faster to deploy static resources on the CDN closer to us?

These are all network level performance optimizations, Go down again is the browser performance optimization load – this part involves resources optimization, the service side rendering, the browser cache mechanism, the construction of a DOM tree, web page layout and rendering process, reflux and redraw considerations, DOM manipulation of reasonable evade, etc. – this is the front end engineer can truly ambitions, study the knowledge, Not only can help us fundamentally improve the page performance, but also can greatly deepen personal understanding of the underlying principles of the browser, the operation mechanism, kill two birds with one stone!

Our entire knowledge map is presented in mind maps as follows:

This article is adapted from front-end Performance Optimization Principles and Practices