Discovering the User Timing API - SitePoint

User Timing API: Precisely Measuring Web App Performance

This article delves into the User Timing API, a powerful tool for web developers to meticulously assess application performance. It provides high-precision timestamps, enabling accurate measurement and reporting of JavaScript code execution, particularly useful for benchmarking.

The API centers around two key concepts: Marks and Measures. A Mark designates a specific point in time, while a Measure calculates the duration between two Marks. Four methods are available: mark(name), clearMarks([name]), measure(name[, mark1[, mark2]]), and clearMeasures([name]).

Browser compatibility is generally good, with support across major desktop and mobile browsers (including Internet Explorer 10 , Chrome 25 , and Opera 15 ). A polyfill, usertiming.js, is available for unsupported browsers.

The API excels at measuring asynchronous operations. By placing Marks at the operation's start and end, developers obtain precise timing data, identifying performance bottlenecks and areas for optimization, ultimately enhancing application speed and user experience.

Understanding Marks and Measures

The User Timing API leverages the PerformanceMark and PerformanceMeasure interfaces (both extending PerformanceEntry). A Mark stores a timestamp, while a Measure calculates the interval between two Marks. Each entry includes:

• name: A descriptive identifier.
• entryType: Indicates "mark" or "measure".
• startTime: The timestamp (for Marks) or the start Mark's timestamp (for Measures).
• duration: 0 for Marks; the elapsed time for Measures.

API Methods and Data Retrieval

The API exposes four methods within the window.performance object:

• mark(name): Creates a timestamp with the given name.
• clearMarks([name]): Removes Marks (all or a specific one).
• measure(name[, mark1[, mark2]]): Measures the time between two Marks.
• clearMeasures([name]): Removes Measures (all or a specific one).

Note: Names are not unique IDs; using the same name multiple times results in an array of entries sorted by startTime.

To access stored data, use getEntriesByType(type) (for Marks or Measures) and getEntriesByName(name), both returning sorted arrays.

Example: Measuring Function Execution Time

<code class="language-javascript">performance.mark("startFoo");
foo(); // Time-consuming function
performance.mark("endFoo");
performance.measure("durationFoo", "startFoo", "endFoo");
performance.clearMarks();
performance.clearMeasure("durationFoo");</code>

Browser Support and Polyfills

The User Timing API enjoys widespread support. However, usertiming.js provides a polyfill for browsers lacking native support, requiring only the High Resolution Time API's performance.now() method.

Demo and Conclusion

A demo (link omitted for brevity) showcases the API's functionality, including error handling for unsupported browsers and displaying measured data.

The User Timing API is a valuable tool for precise performance measurement, offering granular control and aiding in identifying performance bottlenecks for a smoother user experience. Its broad browser support and available polyfill ensure its usability across a wide range of platforms.

Frequently Asked Questions (FAQs)

The FAQs section remains largely unchanged, offering concise answers to common questions about the User Timing API's functionality, usage, and limitations.

The above is the detailed content of Discovering the User Timing API - SitePoint. For more information, please follow other related articles on the PHP Chinese website!