Programming basis -01URL from the input URL to the page display experience what process (white screen is a process of what)?

First, the reasons for inclusion
  1. Important base knowledge of front-end performance
  2. Frequent Interview questions
White screen four tetralogy

DNS Lookup enables the browser to query domain names from the DNS server

  • The browser resolves the domain name of the page and obtains the IP address of the server before communicating with the server
  • Just like Event Loop, during the page loading process, the browser will perform DNS domain name resolution several times, including the domain name of the page itself and various resources required by the page

TCP-> Transport layer communication protocol based on byte streams

Based on the TCP/IP browser and the server TCP request to establish a known but unknown “three-way handshake” here to establish a connection, and provide reliable data transmission services

Server request processing response

  • After the TCP connection is established, the Web server accepts the request and starts processing. The browser waits for the processing response from the server
  • The Web server processes resources according to different resource types

Principles of management of

  • Static resources (images, CSS files, HTML) respond directly
  • Other registered requests are forwarded to the corresponding application server for data processing, data retrieval from the cache, and data returned to the browser in a specified format

The client downloads, parses and renders the display page

After the server returns the data, the client browser receives the data, carries on THE HTML download, parsing, rendering display

Parsing, rendering process

  1. If it is a Gzip package, unzip it to HTML
  2. Parse the HTML header and download the style resource file and script resource file in the header code
  3. Parsing HTML code and style file code, building HTML DOM tree and CSS related CSSOM tree
  4. By traversing the DOM tree and the CSSOM tree, the browser starts calculating node sizes, coordinates, and other styles to construct the render tree
  5. Complete the drawing process according to the render tree
    * Inlined JS code blocking DOM tree construction when parsing HTML * In extreme cases: When the CSS style file is not downloaded, the browser parsing HTML encounters inline JS code, at this time!! According to the security resolution policy of the browser, the browser suspends the EXECUTION of the JS script and temporarily parses the HTML. Until the CSS file is downloaded, the CSSOM tree is built, then revert to the original parsing * be sure to place the JS code properly */
Copy the code
White screen – performance optimization

The DNS

  • DNS cache optimization
  • DNS preloading policy
  • Stable and reliable DNS services

TCP network link optimization

  • For network link optimization, there seems to be no good way but to spend money

Server processing optimization

  • Redis cache
  • Database storage optimization
  • Middleware optimization of the system….

Browser download, parse, render page optimization

  • Make HTML code as lean and structured as possible
  • Optimize CSS files and structures as much as possible
  • Make sure to place THE JS code properly and try not to use inline JS code