観測可能/サブスクリプションがリフレッシュされたときのUIブロッキング

Question

私は数秒ごとにデータをリフレッシュするためのインターバルタイマーで観測可能です。これは次のようになります。

return Observable.interval(2000) 
    .switchMap(() => this.http.get(this.url) 
    .map(this.extractData)) 

ここで、「extractData」メソッドはデータを一部マッサージします。もう片方には2人の加入者がいます。

this.myService.getData() 
    .subscribe(
    data=> this.summarizeData(data), 
    error => this.errorMessage = <any>error 
) 

このすべてを：私はさらにその表示のためのデータをまとめたもので、それがどのように見える他の加入者を持っている

this.myService.getData() 
    .subscribe(
    data => this.data = data, 
    error => this.errorMessage = <any>error 
) 

：あるなど、表示のための配列にそれを置くように、1つは、データを使用しています完璧に動作しますが、私は大量のレコードを取得した後（時間が経つにつれてリストが大きくなります）、1000ほどのように、UIが目立つようにフリーズすることに気付きます。はい、リストサイズを小さくすることができますが、今は大きなデータセットで解決できるかどうか確認したいと思います。

他の投稿を見て、answer to this postで興味深いアプローチを見つけて、ディスプレイに観測値を送信し、非同期パイプを使用して試しました。私は、UIが短期間で凍った2秒ごとに同じ結果を得ました。

どのアプローチが推奨されていますか？すべての例では、私がやっているようなコンポーネントを購読しています。その後、UIを凍結させないようにするための提案はありますか？

UPDATE：Per @Nicolas Angular Zoneを使用してhttpを取得すると、Angular'sゾーン（各サブスクリプションごとに約200〜400 msはレコードの数に依存します）。だから多分私はこれを役に立つ方法で作る方法を理解していないかもしれません（私はそれを効かせることができますが、助けにはならないと思います。

私が正しく理解していれば、「runOutsideAngular」メソッドを使用して、Angularのゾーン外でコードを実行します。その後、変更検出が機能してディスプレイを更新できるように、「実行」を使用して角度ゾーンに物を戻します。

私はObservable側とSubscriber側の両方で何かをしようとしました。しかし、私が言ったように、どちらも助けに見えなかった。正しい方向のポインタがあれば助かります！

観察可能なエンド：

return Observable.interval(2000) 
.switchMap(() => this.doGet()); 

private doGet(): ObservableInput<any> { 
    return this.zone.runOutsideAngular(() => { 
    return this.http.get(this.url).map(this.extractData).catch(this.handleError); 
    }); 
} 

加入者側：私はあなたがしたい時にビューを更新するだけzone.jsに見て、角度ゾーンの外で、あなたの計算を実行しなければならないと思います

this.zone.runOutsideAngular(() => { 
this.myService.getData() 
.subscribe(
    data => { 
    this.zone.run(() => this.data = data) 
    }, 
    error => this.errorMessage = <any>error 
) 
}); 

Answer 1

更新。あなたのパフォーマンスを大幅に向上させます。 この記事を見て、これはあなたに良いスタートを与えるでしょう。 Angular zone

これ以外にも、変更の検出方法をOnPushに変更し、それに応じてモデルを慎重に更新する必要があります。