如何避免 Ember 在呈现 DOM 时冻结

Question

我看到我的导航和其他组件冻结（不响应 hover/click 事件）几秒钟.. 在获取特定路线的模型后.. 遇到过这样的事情吗？

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

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

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

Answer 1

Javascript 可能会在 Ember 呈现复杂模板或 Ember 数据接收到大量数据转储时冻结。 JS是单线程的，这种卡顿是无法解决的，但是可以通过优化你的代码来避免！

如何优化模板：

首先使用 Ember Inspector. Look for the components that take longest to render and tackle those first. Alternatively use Perforator 中的“性能”选项卡分析，一个 Chrome 扩展将显示每个视图的渲染时间/ 组件。
使用Ember.run.next()将大操作分散到下一个周期。这与 setTimeout() 非常相似，但具有 Ember 集成。
将： {{link-to 'route'}} 替换为 <button {{action 'openRoute'}}>。渲染 link-to's 需要比使用 Ember 操作的简单 HTML 更高的性能来渲染。对我们的项目产生了巨大的影响，因为我们在一页上有数百个。
尽可能避免重新渲染。 例如：不是通过对对象数组进行排序然后使用 [=13 再次渲染它们来对列表进行排序=]，使用CSS3flex排序。这不需要 JS，因此不需要冻结。
保持 Ember 最新。 Ember 的渲染引擎 (Glimmer) 不断改进。
使用 web workers 在后台渲染您的 HTML（安静高级）。

如何优化大数据：

考虑异步加载模型关系而不是包含它们。
仅加载显示给用户的数据（分页）。
缩短发送的数据。

欢迎提出更多建议！

Answer 2

您需要做更多的基准测试来确认您的假设，即问题出在渲染上。实际上，我猜想问题至少出在加载数据上。检测您的代码以检测此问题：

model() {
  console.time("modelStart");
  var data = this.store.query(...;
  data.then(() => console.timeEnd("modelStart");
  return data;
}

上述时间将是服务器延迟和数据到达后 Ember 数据本地处理的组合。显然，浏览器在等待服务器响应时不会冻结。要确定 after 数据到达后处理它并填充存储所需的时间，您可以从报告的时间中减去网络选项卡中发现的大约服务器延迟，这应该足够好，或者，如有必要，您可以更深入地进行检测以查找 Ember Data.

实际占用的时间

如何避免 Ember 在呈现 DOM 时冻结

How to avoid Ember from freezing when the DOM is being rendered

handlebars.js

ember.js

ember-data

如何优化模板：

如何优化大数据：