🔎 PerformanceObserver Polyfill
The PerformanceObserver interface is a JavaScript API that can be used to observe the Performance Timeline to be notified of new performance metrics as they are recorded.
This polyfill allows consumers to use the PerformanceObserver interface within browser environments, which have basic Performance Timeline support (I.e. window.performance.getEntries()), but don't have observer support.
The polyfill works by falling back to polling the Performance Timeline on a given interval and calling all subscribed observers with the resulting set of entires.
Quick links
Installation
npm install --save @fastly/performance-observer-polyfill
Usage:
As a polyfill
This automatically "installs" PerformanceObserverPolyfill as window.PerformanceObserver() if it detects PerformanceObserver isn't supported:
import '@fastly/performance-observer-polyfill/polyfill'
// PerformanceObserver is now available globally!
const observer = new PerformanceObserver((list) => {});
observer.observe({entryTypes: ['resource']});
Usage: As a ponyfill
With a module bundler like rollup or webpack,
you can import @fastly/performance-observer-polyfill to use in your code without modifying any globals:
// using JS Modules:
import PerformanceObserver from '@fastly/performance-observer-polyfill'
// or using CommonJS:
const PerformanceObserver = require('@fastly/performance-observer-polyfill')
// usage:
const observer = new PerformanceObserver((list) => {});
observer.observe({entryTypes: ['resource']})
Caveats
As the polyfill implements the PerformanceObserver interface by falling back to polling the Performance Timeline via a call to window.performance.getEntries() we are limited to only expose timeline entry types that are supported by getEntries(). Therefore the polyfill can only be used to observe the entry types: navigation, resource and mark. Newer entry types such as paint are only exposed by the native PerformanceObserver implementation and thus not polyfillable.
Development
Requirements
- Node.js >= 10
Install
git clone [email protected]:fastly/performance-observer-polyfill.git
cd performance-observer-polyfill
npm install
npm run build
Running
Most actions you'd like to perform whilst developing performance-observer-polyfill are defined as NPM scripts tasks and can be invoked using npm run {task}.
A list of all commands and their description can be found below.
| Name | Description |
|---|---|
| build | Compiles the application for production environments |
| build:dev | Compiles the application for development |
| lint | Lints the source files for style errors using ESLint and automatically formats the source files using prettier |
| test | Runs the unit test suite |