(I’m a practical person at all times)

Most of us are familiar with front-end performance monitoring systems. Maybe you’re using them, or maybe you’ve just heard of them. In short, it is such a frequent occurrence in our work.

So to do a front-end performance monitoring system, what dimensions of information should we count? What data is really useful to us? What are the scenarios in which it applies? There are a lot of questions to answer, we should answer some questions before doing, if these questions can not be answered then do not try. Here are some of the questions I felt I needed to figure out.

Let’s figure something out

  • Why do we need the front-end performance monitoring system? Is it really needed or just developing?
  • There are so many mature products in the industry, can I just use them? Is it better to make one yourself?
  • What latitude information should we collect? Are you sure of the accuracy of your statistics?
  • Do these dimensional information you designed really have reference value for our development?
  • Do you have a product that can be marketed to your team? Do people need your product? Will he cooperate with you?
  • If you start, do you understand the needs of others on the team? Do they have any suggestions that you can use for reference?
  • Will it improve your skills or the team’s? Are there server resources? Are there any plans for future iterations?
  • Can you bring the rest of the team together? Does it appeal to them?

These are some of the questions I personally think we should be thinking about, and as long as we can give a reasonable answer, let’s get started.

So let’s get started

We should figure out some technical or UI issues before we start building a product

Maybe you should draw some prototypes on your product, even a simple hand-drawn sketch is OK.

Technically we need to address core statistical issues, such as apis for collecting page performance data: The performance, the performance more than Internet explorer browser compatibility, performance, timing statistics page performance, performance. GetEntriesByType (‘ resource ‘) resources statistics page performance. Window. onerror Indicates the error information on the statistics page.

Problems encountered during development:

  • How do I count all AJAX performance data for a page and know that all AJAX is loaded

  • How to count the performance details of all the resources on a page (including asynchronous Ajax and images), can the browser API handle that

  • How do I know which pages a user visited, how deep they visited them, and how do I keep track of them

  • How can I cache the third-party interface used by users to obtain IP network information and solve the problem that users invoke the third-party interface every time they access the IP network

  • A page resource, Ajax, JS error at the same time, how to capture and record all

  • How to solve the problem of frequently writing too much data? How to design or deal with the database

In view of the above problems, I will simply describe my handling methods:

1. How do I count all AJAX performance data for a page and know that all AJAX is loaded?

Since ajax loads on a page are mostly asynchronous, we can’t be sure that the ajax on the page has actually finished loading, and window.onload doesn’t solve our problem.

Since most web ajax uses the XMLHttpRequest object, we can redefine the XMLHttpRequest object where the page is loaded to block the open, onLoad, and onReadyStatechange methods. Refer to this project for specific codes.

2. How to count the performance details of all the resources on the page (including asynchronous Ajax and images), can the browser API handle it?

At all asynchronous resources page finishes loading before the performance. GetEntriesByType (‘ resource ‘) method to get a list of resources are not complete, as much as possible, how to ensure complete?

There are mainly two kinds of asynchronous resources on a page: ajax and images. For Ajax, we can use method 1 to get the final loading time. For images, we can obtain the list of all Image resources on the current page and create a new Image() object to get the final time. Finally, compare the loading time of the image with that of ajax. The longer the image is, the closer (or) the page is to the final loading time. If neither image nor Ajax resource is available, use window.onload. Final call performance. GetEntriesByType (‘ resource ‘) to get the final list of resources.

3. How to know which pages a user visits, how to access depth, and how to track records

Cross-domain cookie, a cookie represents user information, the value of the same session window will not change, another cookie associated with the performance data of the same page, visitor information, error information identification, etc., this cookie will change with the change of the page

4. How to better cache the third-party interfaces used by users to obtain IP network information and solve the problem that users call each time they access

(3) Cookie can be typed. If there is a cookie, the user does not need to request it again.

Two: according to the value of the cookie on behalf of the user to find the IP and operator information after the first request in the back-end cache.

5, a page resource, Ajax, JS error at the same time, how to capture and record all

Write three monitors: one for XMLHttpRequest to get ajax error messages, one for window.onError to get javascript error messages, and one for error events to get page resource error messages.

6, how to solve the problem of too much data frequently written data, how should the database design or processing

One: write a scheduled task, every night at what time to back up the data table, statistics, or delete

Two: a site to establish a data table

Three: page to SQL window or button, manual task

Four: cluster processing (this is not so large, sometimes not all data need to be stored, the company does not have so many servers, generally not considered)


This is the end: no code at all!!

Affiliated Github address: github.com/wangweiange…


Attached are some renderings:









Follow my blog: Zane’s personal blog

Summary after developing the first version of front-end performance monitoring system