@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

    Install

    npm i @fastly/performance-observer-polyfill

    DownloadsWeekly Downloads

    2,119

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    328 kB

    Total Files

    26

    Last publish

    Collaborators

    • admin-jkmiller
    • lgfastly
    • triblondon
    • fgsch
    • jason-maier
    • leklund
    • pabergman
    • gschorkopf
    • andri_antonia
    • bernabas
    • gerlando
    • philippschulte
    • thommahoney
    • psbanka
    • tundal45
    • evrowe
    • jianzhu
    • sokeefe
    • lflores
    • rsouzafastly
    • patrickhamann
    • asergeyev
    • thebsantiago
    • jasminedaly
    • miniheyd
    • erniemiller
    • annawinkler
    • cbuscher
    • akappen
    • hmorrison
    • jparrish
    • rhendricksen
    • qpowell
    • squeemishly
    • lturk
    • tomyoung
    • cdurkee
    • conniechu929
    • stevendaniels
    • briemarie
    • nilium
    • torch2424
    • txantslusam-jootbox
    • hschaaf_fastly
    • johnmdonahue
    • alitorbati
    • benpink
    • uberfuzzyfastly
    • drhoden-fastly
    • fashtley
    • subyraman
    • fastly-releng
    • ickymettle
    • mccurdyc
    • mariawhen
    • anachronism