PerformanceObserver (PerformanceObserver, PerformanceObserver, PerformanceObserver, PerformanceObserver, PerformanceObserver, PerformanceObserver, PerformanceObserver

introduce

PerformanceObserver can be used to capture performance related data such as first frame FP, first screen FCP, first meaningful draw FMP, and so on.

The constructor

PerformanceObserver() creates and returns a new PerformanceObserver object.

Methods provided

PerformanceObserver.observe()
Copy the code

The performance observer’s callback function is called when the recorded performance metric is in the specified entryTypes.

PerformanceObserver.disconnect()
Copy the code

Stop the performance observer callback from receiving performance metrics.

PerformanceObserver.takeRecords()
Copy the code

Returns and clears the list of performance metrics stored in the performance observer.

Observer. observe(options);

options

An object loaded with a single key-value pair whose key name is specified as entryTypes. The value requirements of entryTypes are as follows:

Values of entryTypes: an array of strings whose valid values are detailed in the performance item type. If one of these strings takes an invalid value, the browser automatically ignores it.

If no options argument is passed, or if the options argument is an empty array, TypeError is raised.

The instance

<script>
	const observer = new PerformanceObserver((list) = > {
		for(const entry of list.getEntries()){
			console.groupCollapsed(entry.name);
			console.log(entry.entryType);
			console.log(entry.startTime);
			console.log(entry.duration);
			console.groupEnd(entry.name);
		}
	})	
	observer.observe({entryTypes: ['longtask'.'frame'.'navigation'.'resource'.'mark'.'measure'.'paint']});
</script>

Copy the code

To get the results

According to the printing results, we can infer:

The value in entryTypes is essentially what we tell the PerformanceObserver we want to get for a particular aspect of performance. For example, passing paint means we want to get FCP and FP.

So if we look at printing, it prints fp and FCP

What is FP, FCP, FPM

TTFB: Time To First Byte, First Byte Time FP: First Paint, First draw, Body FCP: First Contentful Paint, First dom element is drawn FMP: First Meaningful Paint TTI: Time To Interactive, the entire content is renderedCopy the code

Don’t understand? Look at the picture!

FP has only one div root node, FCP, which contains the basic frame of the page, but no data content. FMP contains all the elements and data of the pageCopy the code

Wow!!! Aha!

The actual use

Okay, how do we get this in a real project? Take a look at my implementation reference:

  // Use PerformanceObserver to listen on FCP
  if(!!!!! PerformanceObserver){try {
      const type = 'paint';
      if ((PerformanceObserver.supportedEntryTypes || []).includes(type)) {
        observer = new PerformanceObserver((entryList) = >{
          for(const entry of entryList.getEntriesByName('first-contentful-paint')) {const { startTime } = entry;
            console.log('[assets-load-monitor] PerformanceObserver fcp:', startTime);
            
            The startTime operation is reported}}); observer.observe({entryTypes: [type],
        });
        return; }}catch (e) {
      // ios does not support entryTypes and error https://caniuse.com/?search=PerformancePaintTiming
      console.warn('[assets-load-monitor] PerformanceObserver error:', (e || {}).message ? e.message : e); }}Copy the code

PerformanceObserver can be PerformanceObserver can be PerformanceObserver can be PerformanceObserver can be PerformanceObserver can be PerformanceObserver can be PerformanceObserver

Reference article:

Blog.csdn.net/weixin_4097… Developer.mozilla.org/zh-CN/docs/…