Ember JS 中如何优化组件的渲染答案

【问题标题】：How to optimize the rendering of components in Ember JSEmber JS 中如何优化组件的渲染
【发布时间】：2017-02-04 04:47:16
【问题描述】：

在包装器组件中渲染了大约 300 个组件，并且需要花费大量时间来渲染。但是我需要数千个组件才能在包装容器中呈现。在渲染组件时如何在没有任何性能问题的情况下实现这一点 Image shows the rendering time taken by 300 components which is too much

【问题讨论】：

那些组件是你从你的 api 获得的数据对象吗？您真的需要在启动时将它们全部呈现，还是更喜欢某种分页方式？
是的，组件数据对象来自 api。我真的需要将它们全部列出并实现选择组件，然后最后使用拖放对列表中的选定项目进行排序
嗯，我认为查看一些代码会有所帮助，尤其是您的路线？不过不要抱太大希望，可能只是不可能再比你已经做到的速度更快了。
你有卷轴吗？

标签： javascript ember.js ember-data ember.js-view

【解决方案1】：

如果你有一个卷轴，并且你的所有组件不在viewport中，你可以使用Proxy Pattern。

有一个名为 ember-in-viewport 的 ember 插件可以检测您的组件是否在视口中。通过使用它，您可以实现代理模式。

这是sample twiddle。在application.hbs，如果使用my-proxy-component而不是my-component，页面渲染速度会快近3倍。

【讨论】：

【解决方案2】：

这些技巧有点老套，但可能会有所帮助：

您可能希望延迟加载某些组件，例如加载最关键的组件，然后在 didRender 事件（在空闲状态期间）的固定超时后加载其余的更改计算属性。

例如：

onDidRender: Ember.on('didRender', function() {
    Ember.run.later(() => {
        this.set('displayLazyItems', true);
    }, 2000);
})

您可能想做的另一件事是内联代码，而不是为小项目创建新组件。渲染这些可能需要一些时间。

记录时间线并确保性能实际上来自渲染时间，有时实际上是一些 javascript 执行或加载搞砸了。

最后，ember 2.10 包含了 glimmer 2，这个新的渲染引擎可以优化渲染时间高达 50%，你不妨考虑使用它。

【讨论】：