2016-05-20 6 views
0

単一のajaxリクエスト(ページ番号なし)によって返された約1000件のレコードを表形式で表示する必要があります。EmberJSレンダリングの最適化

行と列のそれぞれに2つのループがあるため、レンダリングに時間がかかりすぎる(約10秒間)。

単純なアプローチを使用すると、Emberはこの状況でレンダリングするには時間がかかりすぎます。この状況でパフォーマンスを向上させるために何ができるかをお勧めします。

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

提案が高く評価されます。ありがとうございました。

+0

あなたが探しているの最適化は一言で言えば、「遅延ロード」と呼ばれているユーザーがスクロールとして、最初の50件のレコードをレンダリングし、別のレンダリング50など、すべてがレンダリングされるまで。 –

+0

外部キーを避け、サーバー側でデータを構築すると、コンテンツをより高速にロードできます。したがって、1000レコードを取得するには、1つのリクエストを行います。 DS.attr( 'JSON') –

+0

@SebastienDaniel私は「ページ区切り」を指定していませんが、これは愚かなことかもしれません。しかし、これをどのように最適化できるかについての提案が必要です。 –

答えて

1

たぶんあなたが探していることのようなものです:あなたが見て、それが表示されているだけでコンテンツをレンダリングすると、あなたはスクロールダウンしたときに、それはより多くのコンテンツをレンダリングする任意の改ページか何かを必要としないhttps://github.com/runspired/smoke-and-mirrors

デモで:ネストされたループについて

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

、多分setupControllerメソッド内でそのDATを変換するのが合理的です。

コードこれは本当に簡単です実装する:、

<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>