A, in this paper,

Recently, I found that I have made so many first screen optimizations, and I always count the white screen time and the first screen time together, that is, the DOM is not rendered before the page opens, so I put it in the first screen time. The time can be divided into two stages: the first screen and the white screen. This article will talk about the difference between the two stages and the calculation method.

Second, why need to calculate the first screen time and white screen time

At the beginning of the page, there is always a period of time when the DOM is not rendered. If the page is slow, you can see a blank period of time. If the page is fast, the blank will flash, resulting in a flash screen and poor page experience. Therefore, it is necessary to optimize it.

What are the first screen and the white screen

Let’s talk about white screen and first screen.

1. First Paint

When the browser starts rendering the page, the white screen is triggered. If you set the background color, you will see the background color appear.

A white screen is triggered before the page loads, during which time no content or information is presented to the user. While the background color will be drawn quickly, the actual content and interaction can take a long time to load, so a long white screen will give users the impression that our page is unusable or unusable. You can optimize your web page by adjusting the structure of the page appropriately.

2. First Contentful Paint

The first screen is triggered when the page has drawn the first DOM content, which can be text, image, or canvas.

The first screen determines the user experience of a web page because it marks when the actual content is loaded onto the page, not just the changing state of the page. Because of the focus on content, this metric can know when a user receives consumable information, such as text, visual effects, etc., which is more useful than assessing the user experience through background changes or style changes.

4. Calculation of first screen time and white screen time

1. Calculation of white screen time

A script is added at the beginning of the head tag to record the start time of the white screen. A script is added at the end of the head tag to calculate the end time of the white screen. Some browsers can call the Performance API to calculate the end time of the white screen.

// Support Performance API
firstPaint =  firstPaintEnd - performance.timing.navigationStart;
// Performance API is not supported. End time pageStartTime is calculated in page onLoad
firstPaint =  firstPaintEnd - pageStartTime;
Copy the code

2. Calculation of first screen time

First screen time need two variables, one is the first screen to start, one is the end of the first screen, the screen is hang over time to start, so can be calculated by the above, the first screen end time should be the first screen of the page draw out, but this is bad we define, we know that in a page, image resources tend to be more after finish loading, Therefore, you can count whether the picture with the slowest loading on the first screen is finished, and record the end time.

// Calculate whether the image with the slowest loading on the first screen is finished loading
const img = new Image();
img.src = src;
img.onload = (a)= > {
  firstPaintContentEnd = Date.now();
};

const onload = (a)= > {
  firstPaintContentStart = Date.now();
}

firstPaintContent = firstPaintContentEnd - firstPaintContentStart;
Copy the code

5. Should I calculate the first screen time or the white screen time?

The first screen time is more accurate than the white screen time in evaluating whether the page has started rendering, but the end times are often very close. So it’s up to you to decide which computing method to use depending on your business scenario.

  • For simple web pages with less interactivity, because the load is relatively fast, so the difference between the two is not big, so you can choose a calculation method according to your preference.

  • For large, complex pages, you may find that the white screen time and the first screen time are far apart due to the need to process more complex elements, so it is more useful to calculate the first screen time.

Six, based on the above theory, write a small demo to replace the white screen

<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>demo</title>
    <style>
      .static {
        width: 100%;
        height: 100%;
        background: url(./img/skeleton.png) no-repeat;
        background-size: 100% 100%;
        animation: bg-animation 3s infinite;
      }
      @keyframes bg-animation {
        from {
          opacity:.075; 40%} {opacity:.82; 60%} {opacity:.165; 100%} {opacity: 1; }}</style>
    <script>
      startTime = Date.now();
    </script>
  </head>

  <body>
    <noscript>
      <strong
        >We're sorry but flash-experiment doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div class="static" id="static"></div>
    <div id="app"></div>
    <script>
      window.onload = (a)= > {
        startEnd = Date.now();
        firstPaint = startEnd - startTime;
        console.log(firstPaint);
        removeDom();
      }
      function removeDom() {
        const div = document.querySelector('#static');
        document.querySelector('body').removeChild(div);
      }
    </script>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code

First published in personal blog, reproduced please indicate the source