Today I will introduce the acquisition algorithm of a specific indicator in front-end monitoring. Some people will ask, why only one indicator? This is due to the fact that at present, most of the indicators, such as the bad time, dom loading time, etc., can all through modern browsers provide various apis to get a more accurate, and today the indicators, to get his way past can only be buried by logic point to obtain its value, so doing some front-end monitoring, Need to change the page face according to the business needs of the buried point method of this value, will be tedious, just recently good to do some front-end monitoring related projects, encountered this problem, I was thinking, can through a way without buried point, the value to get? ————FMP(First Meaning Paint) index intelligent acquisition algorithm

What is the FMP

To answer this question, let’s take a look at the main statistical methods of modern front-end monitoring performance. After 2013, standards organizations launched the Performance Timing API, as shown in the figure below

This API counts the time when the browser navigates from the url to the window.onload event, ResponseEnd = responseEnd = responseEnd = responseEnd = responseEnd = responseEnd = responseEnd

  • TTFB: ResponseStart – RequestStart
  • FetchStart (first render time/white screen time)
  • TTI: DomInteractive – FetchStart (First delivery time)
  • Ready: DomContentLoadEventEnd – FetchStart (Load completion time)
  • Load: LoadEventStart – FetchStart (page full Load time)

Through these indicators we can get a lot of useful web page loading information, build up the profile of web page performance

The above indicators can be used to measure the web page numerically, but in fact, this measurement can only reflect the performance view of one perspective. For example, TTFB is very fast, can it mean that users can see the content of the page quickly? This is not necessarily true, so people have started to analyze the performance of web page loading from the user’s perspective, and the user’s view of the loading process is divided into the following stages:

  • Is the page loading properly (happening)
  • Does the page load enough content?
  • Is the page ready to work (usable)
  • Whether pages can interact and animations are delightful

FMP (First Meaningful Paint), which we are talking about today, is the answer to is it useful, is the content loaded enough, which is actually a very difficult concept to define. Every web page has its own characteristics, only developers and products can determine which element loading time point belongs to FMP, today we will discuss, how to find out the main element of the page intelligently, determine the FMP of the page

Conditions for being an FMP element

First we can take a look at the following figure:

useful
useful

  • The volume is larger
  • A large proportion of in-screen visibility
  • Higher proportion of resource loaded elements (IMG, SVG, Video, Object, Embed, canvas)
  • Major elements may be composed of multiple components

How to design the algorithm

The concept of FMP and the conditions for becoming FMP have been introduced previously. Next, let’s look at how to design the algorithm of FMP acquisition. According to the above introduction, we know that the algorithm is divided into the following two parts:

  1. To obtainFMP elements
  2. To calculateFMP elementsLoad time of

If you know the principle of browser loading, you know that the browser will gradually parse the HTML document after obtaining the HTML page. When javascript is encountered, it will stop parsing the HTML document, execute javascript, and continue parsing HTML after execution until the whole page is parsed. In addition to the element loading in the HTML document, dynamic element fragment loading may occur during javascript execution, and typically, the first screen element will be loaded during this time. So we only need to monitor the loading of elements and the point in time when they are loaded, and then do the calculation.

The specific algorithm flow is shown below

I have put the relevant code links at the bottom, and I will explain the whole algorithm process step by step

I divide the whole process into two parts:

  1. The main purpose of listening for element loading is to determine when normal elements are loaded
  2. determineFMP elementsAnd calculate the final omegaFMPvalue

Let’s follow the steps to analyze it

Initialize listening

  • As you can see, we first executed the firstSnapshot method to record the point in time at which the element was loaded before the code was executed

  • Next initialize MutationObserver, to start listening to the loading situation of the document, in the event of a callback, record the current to the performance. The timing. FetchStart time interval, then the body element in the depth of traverse, dot, On which callback is the record recorded, as shown below

  • At the end of the listening process we will trigger a check to see if the listening is stopped in window.onload, as shown in the following figure

    If you listen in longer than thatLIMITOr if the interval for the callback has been more than 1s, we consider the page to be stable, stop listening for dom element loading, and start the calculation process

Complete monitoring, element score calculation

  • First of all, we said that the contribution of our elements to the page is different, and the elements loaded with resources will have a greater impact on the visual sense of users, such as pictures, elements with backgrounds, videos and so on. Therefore, I designed a set of weight system as follows:

    You can seesvg.imgThe weight of omega is 2,canvas.object.embed.videoThe weight of is 4, and other elements are 1. That is to say, if the area of a picture is 1/2 of the area of the first screen, its influence will be the same as that of ordinary elements that occupy the entire first screen

  • Then we go back to the code. We first perform a depth-first traversal search of the entire page and then perform a score calculation for each element, as shown below

    You can see us going throughelement.getBoundingClientRectGets the position and size of the element, and then evaluates it"Width * height * weight * area ratio of elements in viewport"Product of, determine the final score of the element, and then compare the sum of the score of the sub-elements of the changed element with its score to get the larger value, and record the score element set

Determine by calculationFMPElement, compute the endFMPtime

Through the above steps we get a set of “elements with the highest score in the visual area “, we average the score of this set, filter out the set of elements above the average score, and then calculate the time

It can be seen that there are two cases to deal with:

  1. weightIs a common element of 1, then we will query the previously saved time set by the tag above the element to get the loading point of this element
  2. weightIf it’s not one, then it’s actually loading the resource, and the loading time of the element is actually the loading time of the resourceperformance.getEntriesTo get the loading time of the corresponding resource, get the loading speed of the element

Finally, the maximum load time of all elements is removed as the FMP time of page loading

The last

The above is the more specific process of the whole algorithm, some people may say, this thing is accurate? In fact, this algorithm is summarized according to feature analysis and specific rules. Generally speaking, it will be more accurate. Of course, if the layout of the Web page is strange, there may be some deviation. We also hope that everyone can enrich this thing together, and put forward their own suggestions for the calculation method of FMP, and attach the code link