Bad time

White screen time refers to the time when the browser starts displaying content. Therefore, we only need to know the time when the browser starts to display content, that is, the time when the page white screen ends to obtain the page white screen time.

Calculate the white screen time

Therefore, we usually assume that the moment the browser starts rendering the tag or finishes parsing the tag is the point at which the page’s white screen ends.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> White screen </title> <script type="text/javascript"> // Performance. Timing incompatible browsers, such as IE8 window.pagestartTime = date.now (); </script> <! <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page.css"> <script Window.firstpaint = date.now (); </script> </head> <body> <! </body> </ HTML >Copy the code

Therefore, the blank screen time can be calculated as follows:

When the Performance API is available

Hang time = firstPaint - performance. Timing. NavigationStart;

When the Performance API is unavailable

White screen time = firstpaint-pagestartTime;

The first screen time

The first screen time refers to the time from the user opening the website to the completion of the first screen rendering of the browser. For user experience, the first screen time is an important factor for users to experience a website. Generally, if the first screen time of a website is less than 5 seconds, it is better, less than 10 seconds is acceptable, and more than 10 seconds is unacceptable. If the first screen lasts longer than 10 seconds, the user will choose to refresh the page or leave immediately.

The usual way to calculate the first screen is

  • First screen module label
  • Count the time of the slowest image loading in the first screen
  • Custom first screen content calculation method

1. First screen module label marking method

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> <script type="text/javascript"> window.pageStartTime = Date.now(); </script> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page.css"> </head> <body> <! <div class="module-1"></div> <! <div class="module-2"></div> <script type="text/javascript"> window.firstscreen = date.now (); </script> <! <div class="module-3"></div> <! - the first screen is not visible module 4 -- -- > < div class = "module - 4" > < / div > < / body > < / HTML >Copy the code

The first screen time equals firstScreen – performance. Timing. NavigationStart;

In fact, the first screen module tag method is rarely used in business, and most pages need to pull data through the interface to be fully displayed. Therefore, we will use JavaScript scripts to judge the content loading of the first screen page.

2. Count the loading time of images in the first screen

Generally, the slowest loading of the first screen content is the image resource, so we will take the time of the slowest loading of the first screen as the time of the first screen.

Because browsers limit the number of TCP connections per page, not all images can be downloaded and displayed immediately. Therefore, we will traverse all image tags in the first screen after DOM tree construction is completed, and listen to all image tags onload event, and finally traverse the maximum loading time of image tags, and subtract navigationStart from this maximum to obtain the approximate first screen time.

The first screen pictures of load time is equal to the slowest time order – performance. Timing. NavigationStart;

3. Custom module content calculation method

It is complicated to calculate the loading time of images in the first screen. Therefore, we usually customize the module content in business to simplify the calculation of the first screen time. As follows:

  • Ignore the loading of resources such as images and only consider the main DOM of the page
  • Consider only the main modules of the first screen, not strictly everything above the first screen line