Performance is always a topic in the front-end field, because performance affects the user’s sense of use, retention and other aspects, is one of the important indicators to measure a product, the importance of no words, so how should we quantify the quality of performance?

There are so many tools and indicators to measure the performance of a product, so what performance indicators should we know? Let’s take a look

Performance indicators

Let’s take a look at some commonly accepted performance metrics in the industry:

  • First draw (FP) and first content draw (FCP) times
  • First meaningful drawing (FMP) time
  • Lots of meaningful drawing (LCP) time
  • The first screen time
  • User interactive (TTI) time
  • Total download time

Let’s take a look at what each metric means.

First draw (FP) time: For an application page, the point at which the user first visually sees content that is different from before the jump, or the point at which the page is first drawn.

First Content Rendering (FCP) time: The point at which the browser finishes rendering the first content in the DOM, be it text, image, or any other element, that should be visually intuitive to the user.

First Meaningful rendering (FMP) time: the rendering time of key elements of a page. There is no standardized definition of this concept, as the key elements can be defined by the developer — only the developer or product manager knows what is “meaningful”.

Large amount of Meaningful Rendering (LCP) time: A measure of the rendering time of the largest content element visible within the standard report viewport. In order to provide a good user experience, the site should strive for maximum content rendering within the first 2.5 seconds of the page starting to load.

First screen time: This is a very important metric for all web apps. In plain English, this is the time it takes for the app to render the entire phone screen (before scrolling) after entering the page. It should be noted that there is no definitive consensus on this metric either, such as whether it includes the rendering time of images on the phone’s screen.

User interaction time: As the name implies, the amount of time a user can interact with an application. In general, we think of domReady as the time when we normally bind event operations. If the script on the page that involves interaction has not been downloaded, then of course the so-called user interaction time has not been reached

Total download time: the time required for all resources on the page to complete loading. Generally, you can count the window.onload time to count the time it takes to load all synchronized resources. If there is a lot of asynchronous rendering on the page, you can also use the time when the asynchronous rendering is complete as the total download time.

You can view these indicators by viewing performance in the browser

As you can see from the figure, there is a DCL (DOMContentLoaded) indicator, and we need to pay attention to its difference from the Load event: DOMContentLoaded refers to the time when the DOM content of the document has finished loading, i.e. the HTML structure is complete. However, we know that many pages contain images, special fonts, video, audio and other resources, which are obtained by network requests. When the DOM content is loaded, because these resources often require additional network requests, they have not been requested or rendered. The load event is triggered when all resources on the page have been loaded. Therefore, the Load event tends to lag behind the DOMContentLoaded event in the timeline.

Obtaining Performance Data

With these indicators in mind, let’s look at how these indicators are calculated

The most popular and reliable solution is to use the Performance API, which is very powerful: it contains data not only about page Performance, but also about page resource loading and asynchronous requests.

About performance

const window.performance = { 
    memory: {
        usedJSHeapSize,
        totalJSHeapSize,
        jsHeapSizeLimit
    },

    navigation: {
        // The number of redirects to the current page
        redirectCount,
        // Which way to enter the page
        // 0 Indicates the normal login
        // 1 window.location.reload() is refreshed
        // 2 Enter through browser history, as well as forward and backward
        // 255 Other ways to enter
        type,         
    },

    timing: {
        // Equal to the previous page unload time, or equal to fetchStart time if there is no previous page
        navigationStart
        // Previous page unload time, 0 if there is no previous page or the previous page has a different field from the current page
        unloadEventStart,
        // The time when the previous page's unload event bound callback completes execution
        unloadEventEnd,
        redirectStart,
        redirectEnd,
        // Prepare the time to request the first resource before checking the cache
        fetchStart,
        // Start time of domain name query
        domainLookupStart,
        // The time when the domain name query ends
        domainLookupEnd,
        // HTTP (TCP) connection start time connectStart,
        // The time when the HTTP (TCP) connection ends
        connectEnd,
        secureConnectionStart,
        // Request the start time of the document after the connection has been established
        requestStart,
        // The time when the document starts to return and receive its contents after the connection is established
        responseStart,
        // When the last byte is returned and the contents are received
        responseEnd,
        // document. readyState is the loading time
        domLoading,
        // document. readyState is interactive
        domInteractive,
        // DOMContentLoaded Event start time
        domContentLoadedEventStart,
        // DOMContentLoaded Event end time
        domContentLoadedEventEnd,
        // document. readyState = complete
        // Load event start time
        loadEventStart,
        // Load event end time
        loadEventEnd
    }
}
Copy the code

From these event nodes, a typical metric can be calculated by doing the difference

let times = {}
let t = window.performance.timing

// Parsing DOM tree takes time
times.analysisTime = t.domComplete - t.domInteractive

// Blank screen time
times.blankTime = t.domLoading - t.fetchStart

// User interaction time
times.domReadyTime = t.domContentLoadedEventEnd - t.fetchStart

// The time the user waits for the page to become fully available
times.loadPage = t.loadEventEnd - t.navigationStart
Copy the code