Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewiggins/afterframe
⏱ A simple method to invoke a function after the browser has rendered & painted a frame
https://github.com/andrewiggins/afterframe
Last synced: 1 day ago
JSON representation
⏱ A simple method to invoke a function after the browser has rendered & painted a frame
- Host: GitHub
- URL: https://github.com/andrewiggins/afterframe
- Owner: andrewiggins
- License: mit
- Created: 2019-01-05T10:14:58.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:37:50.000Z (almost 2 years ago)
- Last Synced: 2024-11-05T17:47:48.599Z (8 days ago)
- Language: TypeScript
- Homepage:
- Size: 1 MB
- Stars: 295
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AfterFrame
> Tiny function to invoke a callback after the browser renders the next frame
## Table of Contents
- [AfterFrame](#afterframe)
- [Table of Contents](#table-of-contents)
- [Install](#install)
- [Usage](#usage)
- [Examples \& Demos](#examples--demos)
- [API](#api)
- [afterFrame](#afterframe-1)
- [Parameters](#parameters)
- [Prior Work](#prior-work)
- [Contribute](#contribute)
- [Reporting Issues](#reporting-issues)
- [Submitting pull requests](#submitting-pull-requests)
## Install
This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
```sh
$ npm install --save afterframe
+ [email protected]
```
Then with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:
```javascript
// using ES6 modules
import afterFrame from "afterframe";
// using CommonJS modules
var afterFrame = require("afterframe");
```
The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):
```html
```
You can find the function on `window.afterFrame`.
## Usage
> Inspired by [Nolan Lawson's blog on measuring layout](https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/)
```js
import afterFrame from "afterframe";
performance.mark("start");
// Do some work...
afterFrame(() => {
performance.mark("end");
});
```
`afterFrame` currently relies on [`requestAnimationFrame`](https://caniuse.com/#feat=requestanimationframe) and [`MessageChannel`](https://caniuse.com/#feat=channel-messaging) so support starts at IE10 and above.
## Examples & Demos
[Sample CodePen demonstrating usage of afterFrame](https://codepen.io/andrewiggins/pen/Ydvapy?editors=0010)
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;
}
```
## API
### afterFrame
Invoke the given callback after the browser renders the next frame
#### Parameters
- `callback` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** The function to invoke after the browser renders the next frame. The callback function is passed one argument, a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) similar to the one returned by [`performance.now()`](https://developer.mozilla.org/en-US/docs/Web/API/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](https://github.com/facebook/react/blob/master/packages/scheduler/src/Scheduler.js). Some commits of particular interest:
- [Post to MessageChannel instead of window ](https://github.com/facebook/react/pull/14234)
- [Remove window.postMessage fallback](https://git.io/fhsQk)
- [Reduce scheduler serialization overhead](https://github.com/facebook/react/pull/14249)
- [Jason Miller's tweet](https://twitter.com/_developit/status/1081681351122829325) of the same function provided some good inspiration for reducing code size
- [Nolan Lawson blogged](https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/) 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](../../issues).
If don't, just open a [new clear and descriptive issue](../../issues/new).
### 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//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.