javascript - Ember JS 中如何优化组件的渲染

Question

包装器组件内渲染了大约 300 个组件，并且需要花费大量时间来渲染。但是我需要数千个组件才能在包装容器中呈现。在渲染组件时如何在没有任何性能问题的情况下实现这一点图片显示了 300 个组件所花费的渲染时间太多了

score 0 · Accepted Answer

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

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

例如：

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

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

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

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

score 0 · Accepted Answer

如果你有一个滚动并且你的所有组件不在视口中，你可以使用Proxy Pattern.

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

这是一个示例 twiddle。在中application.hbs，如果您使用my-proxy-component而不是my-component，页面渲染速度将快近 3 倍。

2 回答 2