Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fastly/performance-observer-polyfill
🔎 Polyfill for the PerformanceObserver API
https://github.com/fastly/performance-observer-polyfill
fastly-oss-tier2
Last synced: 2 months 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 (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-05T12:57:52.000Z (about 1 year ago)
- Last Synced: 2024-05-12T18:03:01.695Z (9 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
Awesome Lists containing this project
- 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)