A simple method to invoke a function after the browser has rendered & painted a frame
npm install afterframe> Tiny function to invoke a callback after the browser renders the next frame
- Install
- Usage
- Examples & Demos
- API
- Prior Work
- Contribute
This project uses node and npm. Go check them out if you don't have them locally installed.
``sh`
$ npm install --save afterframe
+ afterframe@0.0.0
Then with a module bundler like rollup or webpack, use as you would anything else:
`javascript
// using ES6 modules
import afterFrame from "afterframe";
// using CommonJS modules
var afterFrame = require("afterframe");
`
The UMD build is also available on unpkg:
`html`
You can find the function on window.afterFrame.
> Inspired by Nolan Lawson's blog on measuring layout
`js
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.
Sample CodePen demonstrating usage of afterFrame
Example function wrapping afterFrame in a Promise:
`js
let promise = null;
function afterFrameAsync() {
if (promise === null) {
promise = new Promise(resolve =>
afterFrame(time => {
promise = null;
resolve(time);
})
);
}
return promise;
}
`
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.
- 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
First off, thanks for taking the time to contribute!
Now, take a moment to be sure your contributions make sense to everyone else.
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.
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/cd afterframe
- Navigate to the newly cloned directory: git checkout -b my-new-feature
- Create a new branch for the new feature: npm install
- Install the tools necessary for development: git commit -am 'Add some feature'
- Make your changes.
- Commit your changes: git push origin my-new-feature`
- Push to the branch:
- Submit a pull request with full remarks documenting your changes.