Refer to some blogs, sorted out for their own interview ~

Bad idea

White screen time: the time from blank screen to display the first screen after the user clicks a link or opens the browser and enters the URL address.

How long the screen goes blank will directly affect a user’s first impression of the site.

The importance of white screen time

When a user clicks on a link or enters a URL directly into the browser to initiate a visit, the user waits for the page to be displayed. The shorter the page rendering time, the shorter the user will have to wait and the faster the user will perceive the page. This can greatly improve the user experience, reduce the number of users jumping out, and improve the retention rate of the page.

A process of white screen

1, the DNS Lookup

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

The browser resolves the domain name of the page, obtains the IP address of the server, and communicates with the server.

Tips: During the entire page loading process, the browser performs DNS Lookup several times, including the domain name Lookup of the page itself and the domain name Lookup generated by the JS, CSS, Image, and Video resources loaded during the PARSING of the HTML page.

2. Establish the TCP connection

The process of establishing TCP requests between the browser and the server is based on TCP/IP, which consists of IP at the network layer and TCP at the transport layer. IP is the unique address of each Internet device on the Internet.

TCP establishes connections through three-way handshakes and provides reliable data transmission services.

3. Server request processing response After the TCP connection is established, the Web server accepts the request and processes it. Meanwhile, the browser waits for the response from the server.

The Web server processes the request according to the request type. Static resources such as images, CSS files, and static HTML respond directly; For example, other registered requests are forwarded to the corresponding application server for data processing and retrieving data from the cache, and the data is responded to the browser in the agreed format. 4, the client download, parse, render display page in the server to return data, the client browser receives the data, HTML download, parse, render display.

  • If the package is Gzip, decompress it to HTML
  • Parse the HTML header code and download the style resource file or script resource file in the header code
  • Parsing HTML code and style file code, building HTML DOM trees and CSS-related CSSOM trees
  • By traversing the DOM tree and the CSSOM tree, the browser calculates the size, coordinates, color, and other styles of each node in turn to construct the render tree
  • Complete the drawing process according to the render tree

Once the HTML is downloaded, the browser parses the header code, performs the style sheet download, and then continues down to parse the HTML code, building the DOM tree, and performing the style download. As soon as the DOM tree is built, start constructing the CSSOM tree. Ideally, the stylesheet is fast enough to download, the DOM tree and the CSSOM tree go through a parallel process, and when the two trees are built, the render tree is built, and then the drawing is done.

Tips: How browser security parsing policies affect HTML parsing:

A particularly tragic situation occurs when the browser parses THE HTML and encounters inline JS code when the CSS style file has not been downloaded. According to the security resolution policy of the browser, the browser suspends JS script execution and HTML parsing. Until the CSS file is downloaded, the CSSOM tree is built and the original parsing is resumed. Be sure to place JS code properly!!

Optimize the rationality of white screen

1. DNS resolution optimization

For DNS Lookup, we can optimize DNS resolution.

  • DNS cache optimization
  • DNS preloading policy
  • A stable and reliable DNS server

2. TCP network link optimization

For network link optimization, there seems to be no better way than spending money!

3. Optimization of server processing

Server side optimization is a huge topic that involves Redis cache, database storage optimization or various middleware in the system and Gzip compression…

4. Browser download, parsing, rendering page optimization

According to the browser to the page download, parsing, rendering process, can consider the optimization processing:

Simplify HTML code and structure as much as possible optimize CSS files and structure must be reasonable placement of JS code, as far as possible do not use inline JS code