Location>code7788 >text

Front-End Resource Monitoring with the Performance API

Popularity：719 ℃/2024-09-19 11:48:39

1. Usefulness of the Performance API

Performance API is a set of tools built into browsers to measure and record various performance metrics during page loading and execution. Its main uses include:

  • Monitoring page resource loading: Tracks the loading time of resources (e.g., CSS, JavaScript, images) on a page.
  • Analyzing page load times: All points in time from navigation until the page is fully rendered.
  • Measuring user interaction performance: Measure the response time of user actions such as clicking and typing.
  • Optimize performance bottlenecks: Pinpoint performance bottlenecks by tagging specific code snippets and events.

This data helps developers better understand page performance, which in turn leads to performance optimization and improvement.

2. Performance API Common APIs

The following APIs are the most common tools used by developers when working with the Performance API:getEntries()、mark()andPerformanceObserver. These APIs provide a full range of capabilities from obtaining performance data to observing performance events.

2.1 ()

() is a method provided by the Performance API that returns all performance entries. These entries record the performance data for loading and interacting with various resources from the time the page was loaded to the current moment. Performance entries include page loaded resources (such as CSS, JS, images, etc.) as well as custom event markers.

// Get performance entries for all resources on the page
const entries = ();
(entries);

pass (a bill or inspection etc)getEntries(), you can get detailed information about the resource loading time, start time, end time, and so on. This is very helpful to know how long it takes to load each resource in the page.

2.2 Types of entries

getEntries() Each of the returned performance entry objects belongs to one of the following types, and developers can filter and analyze different types of data as needed:

  • navigation: Entries related to page navigation, usually used to analyze the point in time at which a page loads.
  • resource: All resource entries loaded via web requests, including JS, CSS, images, etc.
  • mark: A developer-defined marker to record the start or end of a specific event.
  • measure: By() Generated entries for measuring the time interval between two markers.

For example, using the('resource') It is possible to get performance data only for resource loading:

// Get performance entries for all resource loads
const resourceEntries = ('resource');
(resourceEntries);

In this way, developers can easily get the loading time of the page resources and its details.

2.3 ()

() is a method provided by the Performance API that allows developers to manually create markers in their code. These markers can be used to record when a specific event occurs, allowing for more precise timing of a critical action in the code when analyzing performance.

// Creating Custom Markers
('start-task');

// carry out a task
doSomething();

// Creating an end marker
('end-task');

// Measurement of time between start and finish
('Task Duration', 'start-task', 'end-task');

mark() Ideal for measuring the execution time of a piece of code in an application, with themeasure() Used together they can provide more detailed performance analysis.

2.4 PerformanceObserver

PerformanceObserver is an advanced feature of the Performance API that listens for performance events and executes callbacks when they are triggered. This observation pattern helps developers monitor resource loading, navigation, and other performance-related events on a page in real time.

// Create a PerformanceObserver instance that listens for resource loading events.
const observer = new PerformanceObserver((list) => {
  const entries = ();
  (entry => {
    (`${}: ${}ms`);
  });
});

// Listening for performance entries for resource types
({ entryTypes: ['resource'] });

pass (a bill or inspection etc)PerformanceObserver, you can listen for specific types of performance entries such asresource maybemark, and analyze their data in real time. Useful for monitoring performance during resource loading, critical operations or user interactions.

summarize

The Performance API is a powerful tool for front-end developers for performance monitoring, providing the ability to analyze page loads, resource loads, and user interactions in detail. Commonly used APIs such asgetEntries()、mark()andPerformanceObserver, which helps developers access and analyze performance data in real time.

By using the Performance API appropriately, you can better understand the performance of various operations on the page, thus effectively optimizing the loading speed and user experience of your web application.

<Previous Next>