Performance API

There are many APIs and techniques for measuring the performance of a web page (all the APIs listed below are interconnected, share similar syntax, and inherit properties from each other – most importantly, they are used in the same way):

• Performance API – Used to precisely measure the time required for specific performance evaluations. It contains other APIs, each of which measures a specific aspect of the web page's performance. All these APIs are used in the same way (explained in detail under the heading below: Performance APIs). Most of these APIs work from IE10 onwards.
  • Resource Timing API – Measures the time it takes to load all external resources on the web page (CSS, scripts, images, JSON, etc., whether loaded directly or via AJAX or Fetch). Additionally, this API provides information about resource size, when the request was sent, response received, etc.
  • Navigation Timing API – Provides accurate and detailed time statistics during various phases of a website's loading process (e.g., when the connection to the server was established, request/response time, total data size, when the DOM started building, and many other sub-phases).
  • Paint Timing API – Shows how many milliseconds it took to perform the first paint on the web page.
  • User Timing API – Includes standalone techniques: Mark and Measure (explained separately). These allow you to determine how many milliseconds it takes for a block of code to execute. For example, you can measure how long it takes for the hero image to load, how long it takes for the CSS file to load and parse, or for a JavaScript file to download, parse, and execute. This API is useful when you need specific JavaScript code to execute only after a particular resource has been loaded and displayed.
  • Performance.memory – Used to monitor how JavaScript consumes memory during execution.
  • Frame Timing API – A very new API (not yet supported by any browser). It apparently shows the time required for a specific process (such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc.) to complete within a single browser frame (approximately 16.7ms).
• Performance Observer API – An alternative way to use the Performance APIs. This is a new API that does not work in IE browsers. The advantage of using Performance Observer is that performance data is not taken directly from the browser's buffer but is asynchronously passed to a callback function (when available). You can set the callback function to trigger as needed (similar to an event) and include detailed information about the configured performance metrics. Sometimes this is useful, but other times it may be unnecessary, especially since the Performance Observer can complicate the code.
  
  This API essentially uses all the listed APIs above but adds the capability to set a callback function that executes at a desired moment. This has been explained in detail. The downside is that the Performance Observer does not work in IE browsers, while most Performance APIs work from IE10 onwards.
  
  Frame Timing API – Allows us to identify processes lasting 50ms or longer. Using this, we can identify very long-running tasks (poor animations, JavaScript processes, long-running event handlers, expensive reflows, and other re-renders) that slow down the web page. This API can only be used in combination with the Performance Observer (it cannot work without it).
• Memory – A standalone API that shows how much memory the web page occupies. It is not particularly useful.
• Online services – There are several, with the most well-known being jsperf.com. This service is used to compare different JavaScript code snippets to determine which one executes faster. On the site, you can see tests from other users and draw your conclusions about which methods, properties, functions, loops, and techniques perform better than their counterparts, thereby learning a lot about coding practices. Highly recommended.