This is a classic process to open the web page, but also a frequently asked interview questions, the author here simply summarize, for everyone to understand and memory.

  1. DNS resolution is performed to resolve the URL to the corresponding IP address.
  2. A TCP connection is then established with the server at that IP address.
  3. An HTTP request is then sent to the server.
  4. After the request is processed, the server sends the target data in an HTTP response packet to the client.
  5. The browser parses and renders the page after receiving the response message.
  6. After rendering, the page is rendered and waits for the user to do the next step.

In this whole process, there are virtually all the considerations of front-end performance optimization. The solution to front-end performance optimization is to find the best solution to improve the user experience in the above process. To be specific, DNS resolution is time-consuming. If the DNS resolution time is reduced, the page response speed is accelerated. To solve this problem, DNS caching and DNS Prefetch were proposed, which ultimately reduced page requests using browser caching mechanisms and offline storage techniques. Setting up a TCP connection is also time-consuming. We can use long connections, pre-connections, and SPDY connections. For sending HTTP requests, we can reduce the number of times and volume of HTTP requests, such as using image optimization, Gzip, build tool performance tuning, and so on. In addition to these network considerations, the browser rendering of the page in step 5 is the most important aspect of performance optimization. This part involves resource loading optimization, server rendering, utilization of browser cache mechanism, DOM tree construction, webpage layout and rendering process, reducing backflow and redrawing, reasonable avoidance of DOM operation, etc. Performance optimization considerations will be discussed in a future blog post.