Ember batches DOM updates and paints them after every run loop to prevent layout thrashing. This prevents a faster First Meaningful Paint (FMP) because all the content of the page is painted at once. For a large scale application though, some work done on the page like ads, analytics tracking, rendering non critical content, rendering content outside viewport etc. can be deferred to achieve a faster First Meaningful Paint (FMP). This work can be scheduled to run after the First Meaningful Paint and achieve incremental rendering of the page.
This addon provides a service to schedule work in different paint phases of rendering process to get a faster First Meaningful Paint (FMP). It also helps to prioritize and coordinate when the paint happens for different parts of the page.
git clone <repository-url>
this repositorycd ember-app-scheduler
npm install
bower install
The afterFirstRoutePaint
queue can be used to schedule work after the route is first painted. This is useful for scenarios like rendering content outside viewport, rendering non critical content etc.
this.get('scheduler').scheduleWork('afterFirstRoutePaint', () => {
// schedule work
});
The afterContentPaint
queue can be used to schedule work after all the important content of the page has been painted. This is useful for scenarios like rendering ads, scheduling tracking work, rendering of popup overlays etc.
this.get('scheduler').scheduleWork('afterContentPaint', () => {
// schedule work
});
ember serve
- Visit your app at http://localhost:4200.
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.