Monitoring web performance with performance

Monitoring indicators ：

google The developers came up with a RAIL Model to measure application performance .

1. Response： Respond to user input ,

2. Animation： Animation or scrolling needs to be done in 10ms The next frame is generated within the frame ,

3. Ilde： Maximize free time ,

4. Load： Page load time is not more than 5 second .

Animation,Idle,Load, Separate codes web Four different aspects of the application life cycle .

1. user-centric , The ultimate goal is to make your website run quickly on any specific device , It's about satisfying users ,

2. Respond to users immediately , stay 100 Confirm user input... In milliseconds ,

3. When animating or scrolling , stay 10 Generate frames in milliseconds ,

4. Maximize the idle time of the main thread ,

5. Continue to attract users , stay 1000 Present interactive content within seconds .

We can look at it from three aspects ： Response speed , Page stability , External service call .

1. Response speed ： Initial page access speed + Interactive response speed ,

2. Page stability ： Page error rate ,

3. External service call ： Network request access speed .

Page access speed ： hang , First screen time , Interactive time .

1. performance Of The Paint Timing API: window.performance.getEntriesByType(“paint”);

   1. first paint(FP)： First render ,

   2. first contentful paint(FCP)： For the first time, there's content rendering .

   3. These two indicators have been standardized , from performance Of The Paint Timing API Can be obtained , Generally speaking, I want to love you and communicate with you in two times , But there are also cases where the two are different .

2. Suppose a web page DOM When the structure changes dramatically , That's when the main content of this page appears , So at such a point in time , It's the first meaningful rendering

   1. First meaingFul paint: The first meaningful rendering ,

   2. hero element timing： Key elements of the page .

3. Time to interactive： Interactive time .

Performace analysis

performance attribute

Browser provided performace API, This is also the main source of performance monitoring data ,performace Provide high precision timestamps , The accuracy can reach nanosecond level , And it won't be affected by the time setting of the operating system . At present, mainstream browsers support .

1. window.performance.navigation: Page load or refresh , How many redirections have occurred ,

2. window.performance.timing: The duration of each stage of page loading ,

3. window.performance.memory： Basic memory usage ,Chrome A nonstandard extension added .

4. window.performance.timeorigin： Time at the beginning of performance measurement high precision timestamp .

Use performace Calculation

performance.getEntriesByType(“navigation”);

1. Number of redirects ：performance.navigation.redirectCount,

2. Redirection takes time : redirectEnd - redirectStart,

3. DNS Analytical time consuming : domainLookupEnd - domainLookupStart,

4. TCP Time consuming to connect : connectEnd - connectStart,

5. SSL Secure connections take time : connectEnd - secureConnectionStart,

6. Network requests take time (TTFB): responseStart - requestStart,

7. Data transmission takes time : responseEnd - responseStart,

8. DOM Analytical time consuming : domInteractive - responseEnd,

9. Resource load time : loadEventStart - domContentLoadedEventEnd,

10. First package time : responseStart - domainLookupStart,

11. White screen time : responseEnd - fetchStart,

12. First interactive time : domInteractive - fetchStart,

13. DOM Ready Time : domContentLoadEventEnd - fetchStart,

14. Page full load time : loadEventStart - fetchStart,

15. http Head size ： transferSize - encodedBodySize.

Resource Timing API

performance.getEntriesByType(“resource”);

/  Load time of a resource type , Measurable pictures 、js、css、XHR
performance.getEntriesByType("resource").forEach(resource => {
    
    if (resource.initiatorType == 'img') {
    
    console.info(`Time taken to load ${
      resource.name}: `, resource.responseEnd - resource.startTime);
    }
});

summary

be based on performance We can measure the following aspects ：mark、measure、navigation、resource、paint、frame.

1. let p = window.performance.getEntries();

2. Number of redirects ：performance.navigation.redirectCount

3. JS Number of resources ：p.filter(ele => ele.initiatorType === “script”).length

4. CSS Number of resources ：p.filter(ele => ele.initiatorType === “css”).length

5. AJAX Number of requests ：p.filter(ele => ele.initiatorType === “xmlhttprequest”).length

6. IMG Number of resources ：p.filter(ele => ele.initiatorType === “img”).length

7. Total resources : window.performance.getEntriesByType(“resource”).length

It's time-consuming and time-consuming ：

1. Redirection takes time : redirectEnd - redirectStart

2. DNS Analytical time consuming : domainLookupEnd - domainLookupStart、

3. TCP Time consuming to connect : connectEnd - connectStart

4. SSL Secure connections take time : connectEnd - secureConnectionStart

5. Network requests take time (TTFB): responseStart - requestStart

6. HTML Download time ：responseEnd - responseStart

7. DOM Analytical time consuming : domInteractive - responseEnd

8. Resource load time : loadEventStart - domContentLoadedEventEnd

Other portfolio analysis ：

1. White screen time : domLoading - fetchStart

2. Rough first screen time : loadEventEnd - fetchStart perhaps domInteractive - fetchStart

3. DOM Ready Time : domContentLoadEventEnd - fetchStart

4. Page full load time : loadEventStart - fetchStart

JS Total load time :

const p = window.performance.getEntries();
let jsR = p.filter(ele => ele.initiatorType === "script");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));

CSS Total load time ：

const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "css");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));

Reprinted from AlloyTeam：http://www.alloyteam.com/2020/01/14184/