Ember batches DOM updates and paints them after every run loop to prevent layout thrashing. Layout thrashing can prevent a faster First Meaningful Paint (FMP) because all the content of the page is painted at once.
As a way to mitigate the need to render all content at once regardless of its visual priority, 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 FMP. This work can be delayed to run after the FMP and achieve incremental rendering of the page.
This addon provides a way to defer work into different paint phases of the rendering process to get a faster FMP. It also helps to prioritize and coordinate when the paint happens for different parts of the page.
The documentation website contains more examples and API information.
ember install ember-app-scheduler
The ember-app-scheduler
addon connects its functionality via the application's router. By connecting to the router's routeWillChange
/routeDidChange
hooks (willTransition
/didTransition
in Ember < 3.6), it ensures that the timing of its API is in sync with the application's timings.
To connect to your router, import setupRouter
and reset
from ember-app-scheduler
and invoke them:
import EmberRouter from '@ember/routing/router';
import { inject as service } from '@ember/service';
import { setupRouter, reset } from 'ember-app-scheduler';
import config from './config/environment';
export default class Router extends EmberRouter {
location = config.locationType;
rootURL = config.rootURL;
@service router;
constructor() {
super(...arguments);
setupRouter(this.router);
}
}
Router.map(function() {
// ...
});
Note: There is a bug in Ember.js < 3.26 which may result in Uncaught RangeError: Maximum call stack size exceeded
and you may need to use setupRouter(this)
instead and deal with deprecation message until you are able to upgrade to 3.26. For more info see emberjs/ember.js#17791
You can then use one of the provided APIs to defer work.
whenRouteIdle
By deferring work until the route is idle (approximately after the first paint completes), we delay non-critical work. To do this, you can import and use the whenRouteIdle
function. This is useful for scenarios like rendering ads, scheduling tracking work, rendering of popup overlays etc.
In most cases, the whenRouteIdle
function is all you need to defer work, though ember-app-scheduler
does expose other functions.
import Route from '@ember/routing/route';
import { whenRouteIdle } from 'ember-app-scheduler';
export default class IdleRoute extends Route {
activate() {
super.activate(...arguments);
whenRouteIdle().then(() => {
// do non-critical work
});
}
}
See the Contributing guide for details.
ember-app-shell ember-app-shell is built and maintained by DockYard, contact us for expert Ember.js consulting. Renders an App Shell based on your actual running Ember.js application using Headless Ch
ember-web-app NOTICE: official repository moved to https://github.com/zonkyio/ember-web-app This Ember addon helps you configure and manage the web app manifest and related meta tags needed to create
您可以配置Ember App和CLI以管理应用程序的环境。 环境配置文件将出现在config/environment.js 。 它包含以下代码结构 - module.exports = function(environment) { var ENV = { modulePrefix: 'query-params', //it is the name of application
ember-fastboot-app-tests This is an ember-cli addon that makes writing FastBoot tests for your Ember app easy and straightforward! It works by spinning up a local FastBoot server using ember-cli-fastb
Ember检查器是一个浏览器插件,用于调试Ember应用程序。 灰烬检查员包括以下主题 - S.No. 灰烬检查员方式和描述 1 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 2 Object Inspector Ember检查器允许与Ember对象进行交互。 3 The View Tree 视图树提供应用程序的当前状态。 4 检查路由,数据选项卡和库信息 您可以看到检查
英文原文: http://emberjs.com/guides/getting-ember/index/ Ember构建 Ember的发布管理团队针对Ember和Ember Data维护了不同的发布方法。 频道 最新的Ember和Ember Data的 Release,Beta 和 Canary 构建可以在这里找到。每一个频道都提供了一个开发版、最小化版和生产版。更多关于不同频道的信息可以查看博客