https://github.com/fastly/performance-observer-polyfill

🔎 Polyfill for the PerformanceObserver API
https://github.com/fastly/performance-observer-polyfill

fastly-oss-tier2

Last synced: about 1 month ago
JSON representation

🔎 Polyfill for the PerformanceObserver API

• Host: GitHub
• URL: https://github.com/fastly/performance-observer-polyfill
• Owner: fastly
• License: mit
• Created: 2019-06-08T00:28:09.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-01-05T12:57:52.000Z (6 months ago)
• Last Synced: 2024-05-12T18:03:01.695Z (about 2 months ago)
• Topics: fastly-oss-tier2
• Language: TypeScript
• Homepage:
• Size: 2.18 MB
• Stars: 29
• Watchers: 7
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-ponyfills - @fastly/performance-observer-polyfill - [`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) (Browser Features)

README

        
🔎 PerformanceObserver Polyfill



  

    

  

  

    

  



The [`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) interface is a JavaScript API that can be used to observe the [Performance Timeline](https://www.w3.org/TR/performance-timeline-2/#dfn-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](#installation)

- [Usage](#usage)

- [Development](#development)

- [License](#license)

## Installation

```sh

npm install --save @fastly/performance-observer-polyfill

```

## Usage: 

### As a [polyfill](https://ponyfill.com/#polyfill)

This automatically "installs" PerformanceObserverPolyfill as `window.PerformanceObserver()` if it detects PerformanceObserver isn't supported:

```js

import '@fastly/performance-observer-polyfill/polyfill'

// PerformanceObserver is now available globally!

const observer = new PerformanceObserver((list) => {});

observer.observe({entryTypes: ['resource']});

```

### Usage: As a [ponyfill](https://github.com/sindresorhus/ponyfill)

With a module bundler like [rollup](http://rollupjs.org) or [webpack](https://webpack.js.org),

you can import `@fastly/performance-observer-polyfill` to use in your code without modifying any globals:

```js

// 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

```sh

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                                                                                       |

## License

[MIT](https://github.com/fastly/insights.js/blob/master/LICENSE)