Front-end page performance is a very core user experience metric.

Why performance monitoring?

Poor page disvalidation will affect user experience, which will lead to customer loss, especially on mobile terminals, where users have a low tolerance for page response delay. Secondly, in order to better user experience, it is necessary to have a clear optimization direction and specific optimization means.

Monitoring indicators?

PV(Page view) UV (Number of page access users) JS Page exception Monitoring Blank screen time First screen time Total download time DNS resolution time TCP connection time HTTP request time HTTP response time

Monitoring mode?

PV, UV can be buried through the page of the way of statistics, data processing.

Page JS exception monitoring

Front-end JS exceptions include: compilation exception, running exception, loading static resources exception, interface exception

Compile exception (found when packaging) Runtime exception (seriously below) loading static resource exception (server exception) Interface exception (network request layer unified error handling)

Runtime exception

1. Window. onerror is called when a js error occurs on the page.

window.onerror = function(message, source, lineno, colno, error) {  }
Copy the code

Error (‘ window.onerror ‘, ‘console. Error’, ‘window.onerror’, ‘window.onerror’, ‘window.onerror’) System will always throw a call Unhandled Promise rejection, needs to be rewritten window. Onunhandledrejection method

(addEventListener(‘error’, handler, true) to catch static resource exceptions)

Performance indicators

Use API Navigation Timing

White screen time: the time when the main document returns the first byte – the starting time when the user enters the url return. (window. Performance. Timing. DomLoading – window. Performance. The timing. The fetchStart)

First screen time: All resources are displayed on the first screen. (window. Performance. Timing. LoadEventStart – window. Performance. The timing. The fetchStart) redirection time (redirectEnd – redirectStart)

DNS resolution time (domainLookupEnd – domainLookupStart)

Time to uninstall the page (unloadEventEnd – unloadEventStart)

TCP connection time (connectEnd – connectStart)

HTTP request (responseEnd – responseStart)

! Official Address:Developer.mozilla.org/en-US/docs/…

SPA Performance Index

API Navigation Timing can monitor the performance of most front-end pages, but with the popularity of SPA mode, the Timing of page content dyeing changes. First rendering (FP) First content rendering (FCP) First preparation rendering (FMP) Task with long interactive time (TTL) API Navigation Timing can obtain the data related to page rendering, but the page will not be refreshed if the URL is changed in a single page application. Therefore, the page rendering time corresponding to the sub-route cannot be obtained, and we need to customize the report. navigator.sendBeacon(url, data); Developer.mozilla.org/zh-CN/docs/…