ember.js - 如何在渲染 DOM 时避免 Ember 卡住

Question

我看到我的导航和其他组件卡住了几秒钟(不响应悬停/点击事件)......在获取特定路线的模型后......
有遇到过这样的事情吗？

可能是因为正在渲染 DOM ......
知道如何避免这种情况吗？

同样的事情发生，当我加载更多项目并将其附加到 DOM 时..

我在 ember-cli@0.1.15 上使用 ember 版本 1.8.1

Answer 1

当 Ember 渲染复杂模板或 Ember Data 接收大量数据转储时，Javascript 可能会卡住。这种JS单线程固有的卡住无法解决，但可以通过优化您的代码来避免!
如何优化模板:

先分析使用 Ember Inspector 中的“性能”选项卡.寻找需要最长渲染时间的组件并首先处理这些组件。或者使用 Perforator ，一个 Chrome 扩展，将显示每个 View /组件的渲染时间。

使用 Ember.run.next()展开大行动进入下一个循环。这很像 setTimeout() ，但与 Ember 集成。

替换: {{link-to 'route'}}与 <button {{action 'openRoute'}}> .与使用 Ember 操作的简单 HTML 相比，渲染链接需要更高的性能。对我们的项目产生了巨大的影响，因为我们在一页上有数百个。

尽可能避免重新渲染。 例如:而不是通过对对象数组进行排序然后使用 {{#each}} 再次渲染它们来对列表进行排序。 , 使用 CSS3 flex 进行排序。这不需要 JS，因此不需要卡住。

使 Ember 保持最新状态。 Ember 的渲染引擎 (Glimmer) 不断改进。

使用 web workers 在后台呈现您的 HTML(安静高级)。

如何优化大数据:

考虑异步加载模型关系而不是包括它们。

仅加载向用户显示的数据(分页)。

缩短发送的数据。

欢迎提出更多建议!