AfterFrame

Tiny function to invoke a callback after the browser renders the next frame

Table of Contents

• Install
• Usage
• Examples & Demos
• API
• Prior Work
• Contribute

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm install --save afterframe
+ afterframe@0.0.0

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import afterFrame from "afterframe";

// using CommonJS modules
var afterFrame = require("afterframe");

The UMD build is also available on unpkg:

<script src="https://unpkg.com/afterframe/dist/afterframe.umd.js"></script>

You can find the function on window.afterFrame.

Usage

Inspired by Nolan Lawson's blog on measuring layout

import afterFrame from "afterframe";

performance.mark("start");

// Do some work...

afterFrame(() => {
  performance.mark("end");
});

afterFrame currently relies on requestAnimationFrame and MessageChannel so support starts at IE10 and above.

Examples & Demos

Sample CodePen demonstrating usage of afterFrame

Example function wrapping afterFrame in a Promise:

let promise = null;
function afterFrameAsync() {
  if (promise === null) {
    promise = new Promise(resolve =>
      afterFrame(time => {
        promise = null;
        resolve(time);
      })
    );
  }

  return promise;
}

API

afterFrame

Invoke the given callback after the browser renders the next frame

Parameters

• callback Function The function to invoke after the browser renders the next frame. The callback function is passed one argument, a DOMHighResTimeStamp similar to the one returned by performance.now(), indicating the point in time when afterFrame() starts to execute callback functions.

Prior Work

• The implementation for this package is heavily inspired by React's Scheduler. Some commits of particular interest:
  • Post to MessageChannel instead of window
  • Remove window.postMessage fallback
  • Reduce scheduler serialization overhead
• Jason Miller's tweet of the same function provided some good inspiration for reducing code size
• Nolan Lawson blogged about using a similar technique to more accurately measure layout time

Contribute

First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.

Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If don't, just open a new clear and descriptive issue.

Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

• Fork it!
• Clone your fork: git clone https://github.com/<your-username>/afterframe
• Navigate to the newly cloned directory: cd afterframe
• Create a new branch for the new feature: git checkout -b my-new-feature
• Install the tools necessary for development: npm install
• Make your changes.
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request with full remarks documenting your changes.