5

repeat.for基本的に、すべてのメッセージをループし、 を使用してメッセージ ビューをレンダリングする で構成される、いわゆるチャット ビューがあります<compose>。

問題は、メッセージ数が 50 を超え、ユーザーがチャット間を移動すると、非常に遅くなることです ( repeat.forVM のデータセットを置き換えると、更新がトリガーされます)。

このようなビューの処理に関して、何か間違ったことをしているように感じます。他の代替案に関する情報を得ることができますか?

UI の仮想化を試してみましたが、残念ながら現在のプラグインは必要な機能 (可変高さのアイテム、ボトムアップの配置) をサポートしていません。

また、バインディングに関してかなりの最適化を行いました。ほとんどは 1 回限りであり、データセットへの更新はデバウンスされます。しかし、主なボトルネックは初期ロード (最初にビューをバインドする) であるため、これでは改善されませんでした。

ありがとう！

現在のアプローチの例:

<li repeat.for="message of chat.messages">
  <compose  view-model.bind="getMessageViewFromMessage(message) & oneTime"
            model.bind="message & oneTime"
            containerless>
  </compose>
</li>
4

2 に答える 2

1

aurelia-ui-virtualizationライブラリをチェックアウトする必要があります。ロードしたら、このような場所で置き換えることができrepeat.for、virtual-repeat.forこの種の状況でパフォーマンスを向上させるのに役立つ仮想化されたリピーターを取得できます。

于 2016-11-02T18:40:26.320 に答える