Source: FE R&D (Shanghai) team – Ma Yijian

1. Web Performance Monitoring

1. What is Web performance monitoring

In terms of technology, front-end performance Monitoring is mainly divided into two ways, one is called Synthetic Monitoring (SYN) and the other is Real User Monitoring (RUM).

  1. Synthetic monitoring is to submit a performance audit page in a simulated scenario, run your page through a series of tools and rules, extract some performance indicators, and get an audit report. Advantage | | to | | ~ faults | | | | implementation is simple, mature solution | | configuration complex synthetic conditions, unable to restore all real scene | | | | can more abundant data collected, Such as hardware indicators or waterfall figure | | login scenarios such as the need for additional processing | | | | no influence on the performance of the real user access | | single run data not enough stable | | | | can provide page load visualization analysis | | data volume smaller | |
  2. Real user monitoring is the user visits on the page of the wearing environment. We extract and clean the various performance index data generated by user visits to obtain the real performance report. Advantage | | to | | ~ faults | | | | without configuration simulation conditions, restore the real scene | | may influence on the performance of the real user access and traffic consumption | | | | no need additional solve scenario | | | can’t collect hardware relevant indicators | | | large data samples, Statistical error small | | acquisition incomplete resource loading waterfall figure | | | | performance data reliable | | | can’t visualization display page loading process |

2. Define monitoring indicators

Front-end performance indicators are as follows:

  • Page Load Time: Page Load Time
  • First screen loading Time: above-the-fold Time
  • Redirection time: redirectEnd – redirectStart
  • DNS query time: domainLookupEnd – domainLookupStart
  • TCP connection time: connectEnd – connectStart
  • HTTP request time: responseEnd -responsestart
  • Parsing dom tree takes time: domcomplete-dominteractive
  • ResponseStart – navigationStart
  • DOM Ready time: domContentLoadedEventEnd – navigationStart
  • Onload time: loadEventEnd – navigationStart, which is the time for the onload callback function to execute. In addition, we also need to pay attention to the successful call rate of the interface, interface response time, resource loading time and front-end exception capture.

Iii. Comparison of existing front-end monitoring platforms

Mature platform:

OneAPM Browser Insight

Advantages: comprehensive monitoring index, mature platform. Cons: The free version limits THE number of PVS, and the data storage time is short, and the enterprise version is too expensive

NewRelic

Old foreign monitoring platform, mature and easy to use disadvantages: expensive (149$/ month)

Ali ☁ ️ very different

Open source platform:

web-monitoring

Statistics such as no page rendering time, white screen time and so on require additional secondary development. Angular2 front-end architecture is estimated to require 15-20 people/day

zanePerfor

Four,

The specific platform to be selected needs to be decided based on the actual PV number of the company’s business and project funds.

The preceding two open source platforms support local deployment. However, if the number of service PVS is large, cluster deployment should be considered and the platform itself is not easy to use, so secondary development may be required.