EmberJS 中的渲染优化答案

【问题标题】：Rendering optimization in EmberJSEmberJS 中的渲染优化
【发布时间】：2016-05-20 12:04:02
【问题描述】：

我需要在表格视图中显示由单个 ajax 请求（无分页）返回的大约 1000 条记录。

由于行和列各有两个循环，因此渲染花费了太多时间（大约 10 秒）。

使用简单的方法，Ember 在这种情况下渲染视图的时间太长。请建议，在这种情况下我可以做些什么来提高性能。

{{#each column in columns}}
  {{#each row in rows}}
    Some content
  {{/each}}
{{/each}}

我们将不胜感激。谢谢。

【问题讨论】：

您正在寻找的优化称为“延迟加载”，简而言之，渲染前 50 条记录，随着用户滚动，再渲染 50 条等，直到全部渲染完毕。
如果您避免使用外键并在服务器端为您构建数据，则可以更快地加载内容。因此，为了拥有 1000 条记录，您需要发出一个请求。 DS.attr('JSON')
@SebastienDaniel 我没有指定“分页”，我知道这听起来很愚蠢。但是，需要有关如何优化的建议。
你在哪里指定不分页？！您始终可以使用 ic.ajax 来检索与您的项目不同步的自定义查询（也是分页）。
@kristjanreinhold ，我在合理的时间内从服务器获取数据。我遇到的问题是客户端的渲染时间。

标签： html optimization ember.js

【解决方案1】：

也许您正在查看的内容类似于：https://github.com/runspired/smoke-and-mirrors

您不需要任何分页或任何内容，它只会呈现可见的内容，然后当您向下滚动时，它会呈现更多内容，请查看演示：

http://runspired.github.io/smoke-and-mirrors/#/examples/infinite-scroll

关于嵌套循环，在setupController 方法中转换该数据可能是合理的。

实现这一点的代码非常简单：

 <div class="table-wrapper dark">
  {{#vertical-collection
    content=model.numbers
    defaultHeight=270
    alwaysUseDefaultHeight=true
    useContentProxy=false
    firstReached="loadAbove"
    lastReached="loadBelow"
    as |item index|
  }}
      <div class="image-slide">
        {{examples/infinite-scroll/components/number-slide number=item.number index=index}}
      </div>
  {{/vertical-collection}}
</div>

【讨论】：