What is white screen time
White screen time refers to the time it takes to enter a string of urls into the browser’s search bar to render the content on the page.
Cause of occurrence
In weak network condition, network delay, JS loading delay and so on block the page; There are bugs in the client, cache module disorder and so on….
Focus on the user
This is the user’s perceived experience of site load time
| Delay time | The user perception |
|---|---|
| 0-16ms | smoothly |
| 0-100ms | The basic flow |
| 100-1000ms | I feel some load tasks on the site |
| 1000ms or more | Lose patience |
So if it is larger than 100ms, try to add the loading effect
The formation of a white screen
Let's take a look at what happens when the front end does a common interview question: enter a URL
DNS Lookup
The DNS Lookup function is used to resolve a domain name on the DNS server
The browser first resolves the domain name of the page and searches for the corresponding server IP address based on the entered domain name, and then communicates with the server IP address
DNS resolves the domain names of the JS, CSS, AND HTML files contained in the entire page.
Establishing a TCP connection request
Browser server communication is based on TCP/IP, this protocol is composed of the network layer IP layer and the transport layer TCP layer,IP is the unique identity of each computer in the Internet; TCP uses three-way handshake for data connection and transmission.
Server request processing response
After the TCP connection is established, the server accepts the request and begins to process it. At the same time, the browser waits for the response from the server.
The Web server responds according to the type of request. Static resource files, CSS files, HTML files are returned directly; Some requests need to be forwarded to the corresponding server, and then the data will respond to the browser according to the convention;
The client downloads the parse and renders the page
After the server responds to the browser’s request, the browser will download, parse, respond and render HTML files;
1. If the response type is gzip, decompress the HTML file.
2. Parse HTML header files and corresponding CSS files and scripts.
3. Parse HTML files and style file resources, build DOM tree and CSSOM tree;
4. Traversed DOM tree and CSSDOM tree, and constructed rendering tree according to node size and color calculation;
5. Render the page
Points to note:
1. When the browser renders the page, js script resources will be blocked; When the CSS file is not downloaded, the browser encountered inline JS code when parsing HTML files. According to the security policy mechanism of the browser, the browser will suspend the EXECUTION of JS files, suspend the parsing of HTML, download CSS files first, until the CSS file download is complete, complete the CSSDOM tree, and restore the original JS. So be sure to place JS files reasonably;
2. CSS styles introduced by import will not be downloaded at one time, but will only be downloaded when running to the page, which is easy to cause page style confusion, etc.; So try not to use import to introduce styles
Now that we know what causes the blank screen, let’s look at how to optimize it:
DNS LOOKUP
1. Use DNS cache optimization; 2.DNS preresolution. 3. A stable and reliable DNS server.
Establishing a TCP connection request
Link layer optimization, mainly depends on money to solve
Server request processing response
Server side optimization is very large, including Redis cache, database storage optimization or various middleware within the system and Gzip compression…
The client downloads the parse and renders the page
- Optimize CSS code, HTML code, reduce redundant code;
2. Proper placement of CSS code and JS code; 3. Try not to use import to introduce CSS and use less inline JS
Feel useful to you to the little sister dot a praise!