Web Performance api--helps you analyze Web front-end performance

Front-end performance statistics Prerequisites API, do you not know?

The text starts from here ~

The development of a modern internet site is a complex task that requires close collaboration between various functions to respond to the ever-changing needs of users. Among them, the performance of the Web page directly determines the user's experience, and with the advent of new client browsing devices and the increasing complexity of website functions, the focus on performance has reached an unprecedented height.

Traditional website performance monitoring usually has the following ways:

Use traditional developer tools to view Web requests, such as browser F12 tools, Fiddler, Charles, and more. The basic approach is to graphically list the download of all resources by tracking the time of the HTTP request and response. This method relies on artificial operation, it is difficult to achieve batch testing and statistics.

Use intrusive JavaScript code to detect when DOM events occur. such as domcontentloaded and Document.onreadystatechange and so on. This approach introduces additional code to the page, adding to the burden on developers and testers, and possibly affecting the performance of the page by detecting potential problems with the code itself.

Using third-party services and tools such as Webpagetest, Pingdom, and so on, these services can often be tested in different browsers and geographies, and provide users with some tuning recommendations. However, some services need to be queued and often differ greatly between test results. The problem of the first approach also exists.

In addition, the above methods of measurement indicators are relatively single, the basic can only play the role of timing and flow calculation. Some other indicators, such as battery status, are powerless. And it is difficult to automate and to statistically test results in a continuous integration process.

Web performance Working Group and browser vendors have recognized the importance of performance for web development, in order to solve the current performance testing difficulties, the company launched a set of performance API standards, various browsers to this standard of support is now gradually mature. The purpose of this set of APIs is to simplify the process of accurate analysis and control of website performance by developers, and ultimately to achieve improved performance. It also includes proposals for new protocols and HTML elements to make content faster and more optimized.

Performance API Samples

The complete set of standards includes more than 10 APIs, one for each aspect of performance detection. To ensure the quality and interoperability of the entire set of standards, it is customary for them to apply the canonical maturity process, which is at different stages of the process. You can see their current progress in the:

The following is a simple example of the three APIs that are currently in the recommended standard (REC).

Navigation Timing (navigation timings)

The Navigationtiming API can help Web site developers detect real user data (RUM), such as bandwidth, latency, or overall page load times for the home page. Developers can use the following JavaScript code to detect page performance: It should be noted that the purpose of Navigation timing is to analyze the overall page performance metrics. If you want to get performance metrics for individual resources (such as JS, pictures), use the resource Timing API.

The navigationtiming has just announced a 2, which will replace the previous version.

High Resolution Timing (precision timing)

The JavaScript interface defined by the API specification provides the current time in the exact microsecond level and is unaffected by system clock skew or adjustment. For performance analysis, accurate measurement results are significant.

Page Visibility (visibility of pages)

Through this specification, Web site developers can programmatically determine the current visibility of the page, so that the site can more effectively utilize power and CPU.

The Visibilitychange event of a Document object is triggered when the page gets or loses focus. This event is useful for understanding the visible state of a page, for example, a user may open multiple browser tabs at the same time, and you want to do something (such as playing an audio file or performing a JavaScript animation) only when the user displays your site page. Can be triggered by this event. For mobile devices, this feature can save the device's battery consumption if the user opens your site in one of the tabs but is browsing for something else in another tab. (though it doesn't make much sense for your site's performance ...) ）

Introduction to other parts of API features

Resource Timing (Resource timing)-the timing of a single resource (slice) allows for a fine-grained user experience to be detected.

Performance Timeline (performance timeline)--Gets the performance data collected by navigation Timing, resourcing Timing, and user Timing in a single, unified interface.

Batterystatus (battery status)-ability to detect the current device's battery status, such as whether it is charging, battery level, and so on. It is useful for mobile devices to determine whether something is displayed (such as video, animation, and so on) based on the current charge.

User Timing--You can customize the timing of a piece of code, a function, to see how long the code runs, similar to the role of Stop watch.

Beacon--You can send analysis results or diagnostic code to the server, which takes the form of asynchronous execution and therefore does not affect the operation of other code on the page. It is a very convenient tool for collecting test results and making statistical analysis.

Animation Timing (Animated timing)-The Requestanimationframe function allows the browser to master the number of frames in the animation, can effectively match the display's refresh rate, provide smoother animation effect, reduce CPU and battery consumption.

Resource Hits (Resource tip)-Specifies the preload of a resource through HTML attributes, such as the ability to preload the next picture when browsing a photo album, speeding up the display of pages.

Frame Timing (frames timing)-gets frame-related performance data, such as frames per second and TTF, through an interface. The standard is not currently supported.

Navigationerror Logging (navigation error logging)-stores and obtains error records related to the navigation of a document through an interface. The standard is not currently supported.

Web Performance api--helps you analyze Web front-end performance