@fastly/performance-observer-polyfill
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

🔎 PerformanceObserver Polyfill

Travis gzip size

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 git@github.com: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

License

MIT

Dependents (3)

Package Sidebar

Install

npm i @fastly/performance-observer-polyfill

Weekly Downloads

21,530

Version

2.0.0

License

MIT

Unpacked Size

328 kB

Total Files

26

Last publish

Collaborators

  • js312-fastly
  • cbillingsley
  • elemalecot-fastly
  • therealdoramatadora
  • harmony7
  • triblondon
  • fgsch
  • pabergman
  • philippschulte
  • thommahoney
  • patrickhamann
  • squeemishly
  • lturk
  • tomyoung
  • nilium
  • johnmdonahue
  • uberfuzzyfastly
  • fashtley
  • mccurdyc
  • anachronism