Jane said

Front-end infrastructure performance monitoring is an important process on which to develop solutions to improve the user experience. It is an important link that can’t be ignored in modern front-end business.

Synthetic Monitoring – SYN

Run the page through the tool to collect performance indicators and form a report.

Example: Google Tools – Lighthouse =

  1. Download the Google plug-ins, and when you use them, click on the plug-ins directly or click on the Audits in developer tools for performance report generation.
  2. From the command line, install Node (version 5 and above), then NPM run install Lighthouse, and use Lighthouse HTTP /https://xxx to generate performance reports. (Help: Lighthouse — help).

The characteristics of

The difficulty cost is low, and the data indicators collected are rich, but the samples are small.

Real User Monitoring – RUM

After the user visits the page, various performance indicators will be generated, and the user selects the appropriate time/event point to upload the indicators, extract and process the data, and finally form the visualization result.

The characteristics of

The difficulty cost is high, and the data indicators collected are relatively not so rich, but the sample size is large.

Standard apis are required

High Resolution Time Level 2

Represents a highly accurate time specification that supports client delay measurements within an application. The specification has a subtle (thousandth of a millisecond) level of time accuracy, while supporting monotonic clocks, which always add undisturbed clocks.

Perfomance Timeline Level 2:

Perfomance Timeline itself is a specification used to support client delay measurement, and Perfomance Timeline Level2 will be based on Perfomance Timeline, Added timeOrigin, Performance.now (), Performance.observer (), entry related (what do you think is Perfomance’s basic properties).

Resource Time Level 2:

The Resource Timing API can be used to obtain the detailed timing data loaded by application resources (such as CSS, JS, IMG, interface request data, etc.). The data returned by the API are High Resolution timestamps (i.e., High Resolution Time). Note: The data collected by this API is stored in an entry whose entryType is “Resource”. Obtain it as follows:

Navigation Timing Level 2:

Provides the website performance data, which is obtained using the Naviagtion Timing API as follows:

The Server Timing:
  • concept

An indicator of how many steps a server takes to respond to a request.

  • meaning

When a performance problem occurs, you can directly locate the fault on the server without a front-end check (for example, F12).

  • nature

Server Timing is restricted by the same Origin policy. You need to set the Timing- allow-origin whitelist in the respose header. You can also set it to *(that is, pass all).

  • Break down

Server – Timing: db. Dur = 100 db; Dur =100 is a server-timing metric, where db is metric-name, semicolon (;). The following dur=100 is server-timing-param, where dur is server-timing-param-name, and 100 after equals (=) is server-timing-param-value. Server – Timing: db. Dur =100 means that it takes 100ms for the server to query the database (a time value is generally set as critical, above which is a performance problem).

  • performance server timing

Each performance navigation/resouce entry contains a serverTiming array, which stores all parameters in the Server-Timing array. Each object in the array is a performance metric (that is, a server-timing-metric with a metric-name) and each object has three parameters: Metric-name, duration, and description If the backend is not set the Server – Timing or in the request header is cross-domain restrictions, so the performance. GetEntriesByType (” resource “) [r]. Ind (at a) serverTiming null array.

  • support

As of 19.09.09, Google 65+, Firefox 61+ support.

Paint timing:

Provides the points in time during the build process when a page is drawn/rendered (that is, the render tree is converted to page elements).

Frame timing:
  • concept

Provides frame timing data for the browser event loop.

  • A frame

Represents the amount of work the browser does in an event loop iteration. Such as dom processing, resizing, scrolling, rendering, CSS animation, etc.

  • experience

Refresh rate: 60Hz, corresponding frame rate: 60fps(frames per second), which can meet a good experience. So it takes the browser 16.7ms to process a frame.

  • Frame entry object

Entrytype: ‘frame’, name: address, starttime: starttime, duration: interval between two frames.

  • access

Performance. GetEntrysByType (‘ frams).

  • Listening to the way
var observer = new PerformanceObserver(function(list, obj) {
                        console.log('list',list);
                        console.log('obj',obj);
                    });
                    observer.observe({entryTypes: ["frame"]});
Copy the code

New PerformanceObserver(function(list, obj) {}); PerformanceObserver(function(list, obj) {}); Observer.observe ({entryTypes: [“frame”]}); Is a change that indicates which types of entry objects to listen for.

PerformanceObverser:
var callback = function(list, obj) {
          console.log('list',list);
          console.log('obj',obj); } var observer = new PerformanceObserver(callback); The observer. Observe ({entryTypes: [" resource"]});
Copy the code

The new PerformanceObserver (the callback); PerformanceObserver constructor is instantiated, callback is registered, and the observer object is reverted. The observer. Observe ({entryTypes: [” resource “}); , indicates that the change of resource entry type is monitored. The list and obj in the callback are as follows:

The user timing:

User Timing Indicates that users create time stamps by themselves and the entry types are Mark and meature. Details :(what you think perfomance is is explained in the basic properties).

Long the Tasks:
  • concept

Filter out and tell us which tasks are blocking the main thread for more than 50ms.

  • Threshold source = 50ms This threshold standard is derived from the section “Response: Process Events in under 50ms” in RAIL Model. Will bring the following problems:
  1. Interactive time delay
  2. Latency for severely unstable interactions (click, scroll, scroll, etc.)
  3. Seriously unstable event callback delay
  4. Chaotic animation and scrolling
  • Long task case

Event callbacks that take too long, costly backflow redraws, and what the browser does between adjacent loops in an event loop that is longer than 50ms.

  • Entry for

Performance. GetEntrysByType (‘ longtask ‘). You can use OVServer to set up listening tasks.

The performance of timing:

Details :(what you think perfomance is is explained in the basic properties).

What is level2?

Performance Timeline, a specification developed by the W3C group, defines interfaces for performance metrics throughout the application lifecycle. Performance Timeline Level2 is the second version of its standard and includes:

  • Performance Basic interface extension
  • Expose performanceEntry in Web Workers
  • PerformanceObserver support node also supports the Performacne API. In the browser, performanceObserver ={}, performanceObserver ={}} = window In Node, obtained by const {performance={},PerformanceObserver={}} = require(‘ perf_hooks’). PerformanceObserver: The new performance metrics API is required through PerformanceObserver, but browser compatibility is not particularly good in PerformanceObserver. PerformanceObserver implements performance monitoring:
  • A listening event occurs to avoid past polling observation
  • Avoid repeating logic to get different performance metrics
  • Avoid races when other resources operate on the browser buffer

Define collection metrics based on requirements (some metrics are provided here)

  • Page Load Time (PLT) = Load event trigger complete, loadEventEnd – fetchStart.
  • First Paint = First render time (First non-web background pixel rendered), firstPaintTime – fetchStart.
  • First Contentful Paint = First content rendering time (First text, image, background image or non-white Canvas /SVG content rendering), firstContentPaintTime – fetchStart.
  • Start Render = “TTFB” (the time from the request to the server to return data) + TTDD(the time from the server to load the HTML document) + TTHE(the time required to complete the HTML document header parsing), DomContentLoadedEventStart – domainLookupStart.
  • Time To First Byte (TTFB)
  • DOM Ready/First Interactive
  • First CPU Idle
  • Speed Index (visually the pace of change in the loading process, using the Mean Pixel – Histogram Difference algorithm, blog.csdn.net/bulprezht1i…).
  • Perceptual Speed Index (visually the pace of change in the loading process, Structural Similarity Image Metric algorithm, blog.csdn.net/bulprezht1i…).
  • Last Paint Heros
  • Paint Phase Timing
  • Visually Complete time
  • First Meaningful Paint
  • First screen loading Time (above-the-fold Time,AFT)
  • The DOM Complete time
  • The DOM Interative time

Possible problems with performance monitoring in a single page

  1. Window. onload means that all DOM, CSS, JS, img, etc. have been loaded, including dynamically generated loaded elements. For example, react’s biggest component (my custom root component is App), componentWillMount’s performance. Now, > performance.now in window.onload, and the entrys array contains only navigation entries and a few resoruce type entries. There is no paint type entry to monitor rendering. (Although the script with window.onload is already at the bottom of the body). In fact, directly in componentDidMount, you get the entrys array directly, and there’s no paint entry in there either. So just because the DOM is mounted doesn’t mean the rendering is done. After all, when an element is created dynamically, it triggers backflow and redrawing of the browser, and the rendering is not complete until the redrawing is complete.

  2. Single page switching route, Timing will not refresh, still maintain the initial detection of the whole project. Therefore, entry processing of navigation is required.

Solutions/ideas:

The end of the collection is determined by polling to monitor whether the paint entry has been loaded and provided. First Paint and First-Contentful-Paint are then used for calculation (compatibility is not good).

Sampling error

例 句 : Often occur in:

  • Concurrent restrictions on TCP connections with the same domain name (Common)
  • The browser is allocating cache space
  • A higher priority request is being processed

Solution:

  • FetchStart indicates the start time of page loading
  • Relative increments of subsequent time points are reported (Entry of navigation type has been implemented in timeline)
  • Stage cleaning and exception handling

reference

www.infoq.cn/article/Dxa…

Write in the last

I want to make it clear that I’m not a professor, I’m just a sharer, a discussant, a learner with a different opinion or a new idea, come forward and we’ll work on it together. While sharing, it is not only the sharer who is learning and improving, but also the sharer.

Knowledge is everywhere, and when it is gathered, it is yours.

Since useful, might as well like, let more people understand, learn and improve.

extra

I wrote a front-end base performance monitoring package: github.com/Indifferenc…

NPM install performance-kits –save

Ask for stars, wait for bricks, ORz, let’s tie a good fate ~