Front-end performance monitoring platform architecture design

Background: A blogger’s companion: front-end performance monitoring for real users

This blog post takes a hands-on look at how real front-end performance monitoring platforms come into being

Let’s first look at the performance monitoring platform (for corporate sensitivities, here’s a similar network).

  • Platform benefits: You can easily monitor web performance parameters

Without much background and the benefits of the platform, consider the blogger’s sister article: front-end performance monitoring for real users

Get right to the point

How to design the architecture of the platform

The implementation is described in three steps

  1. Add javascript (Step 1) (as shown in figure 1)
  2. Background (Step 2) (as shown)
  3. Performance monitoring platform (front-end visual display)

1. Add javascript (Step 1) (as shown in the figure)

I. How to introduce the script

At the end of the index. HTML page, import the script using an external link. Or dynamically add script tags

  • Why are we doing this? – Does not affect the first screen speed
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="Width =device-width, user-Scalable =no, initial scale=1.0, maximum-scale=1.0, Minimum-scale =1.0">
    <title>xx</title>
  </head>
  <body>
    <div id="app"></div>
    <script title="performance" src="./cdn/performance.js"></script>
  </body>
</html>
Copy the code

How to write the script

Send requests (using the native API: FETCH) to pass performance parameters to the background

function getPerformanceData () {
    let performanceData = ' '
    console.log(window.performance)
    console.log(window.performance.getEntriesByType('resource'))
    console.log(window.chrome.loadTimes())
    / /... Omit processing details, simple screening, front-end need not do too much processing, unified back-end processing
    return performanceData
}      

setTimeout(() = > { // Make sure the performance parameters are ready
    fetch('/xx/xx/ XXXX/your server address ', {
        method: 'POST'.headers: {
            'Content-Type': 'application/json; charset=utf-8'
        }, 
        body: JSON.stringify(getPerformanceData()) 
    }) 
}, 2000)
Copy the code

2. Background (Step 2)

The backend is not very complicated, and the front end can also be written directly. Bloggers implement it with Node + KOA

For specific performance parameters that need to be calculated (not for the front end), you are advised to directly read the following sections: “1. Collecting Front-end Performance Data for Real Users” and “3. Definition and Processing Calculation of Monitoring System Indicators” in the “Front-end Performance Monitoring for Real Users”

Objective indicators calculation define
DNS resolution time domainLookupEnd – domainLookupStart The domain name of the originating page is resolved to completion
TCP connection establishment time connectEnd – connectStart The TCP connection is initiated and the three-way handshake is completed
Request waiting time responseStart – requestStart The first byte is returned from the page request to the server
Document download time responseEnd – responseStart Return the first byte from the receiving server to the home page to complete the download
Note: All the above are time periods. The following values are total_time and are based on StartTime
First byte time responseStart – StartTime
Page DomReady domContentLoadedEventEnd – StartTime
Page white screen time window.chrome.loadTimes().firstPaintTime*1000 – StartTime
The first screen is complete FirstScreenTime (this value needs to be manually embedded in the code, as shown below) -startTime
Page load completion time loadEventEnd – StartTime

3. Performance monitoring platform (front-end visual display)

Front-end visualization can be achieved using the third library:

Echarts or antv

Original collation, there are mistakes can leave a message, if useful, thank you ~

Performance optimization collection quick entry:

  • How to determine the best caching strategy for front-end resources?
    • Start of browser Cache- > cache-control
    • Browser caching mechanisms (combined with response headers)
    • Impact of HTTP /1 and HTTP /2 on front-end performance optimization policies
  • The relationship between <link> and <script> and DOM parsing rendering
    • Introduction to the browser multi-process architecture
  • Understand Web performance concepts and common analysis tools
    • Web performance analysis tool PageSpeed Insights and Lighthouse Use tutorial
  • Web performance – White screen time detail and optimization
    • Web performance -HTML and CSS optimization
    • Web performance – Image optimization
    • Web performance – Font optimization
    • Web performance-JS optimization
    • Web performance – Optimizing DOM operations (rearrange redraw)
    • Description and optimization of the basic principles of TCP transmission
    • Web Performance -CDN architecture introduction and optimization
      • Webpack project to configure the third-party library CDN, and do CDN fault tolerance
  • Front-end performance monitoring for real users
  • Front-end performance monitoring platform architecture design