websocketのパフォーマンスに関する問題 - すべてのメッセージがトリガされる角度変化の検出

Question

私はwebsocketを持っていますが、現在は毎秒約45でメッセージをストリーミングしています。このレベルでは完全にクロムを殺します。ブラウザウィンドウのすべての機能がロックされます。

私はこの問題の根本的な原因を見つけようとしましたが、私がこれらのメッセージをどのように処理しているか、またはAngularで検出/更新を変更していると思われました。

しかし、今、私は私が得ることができる最も簡単なのWebSocketの実装に残されています：

this.socket = new WebSocket('ws://localhost:5000/ws'); 

let i = 0; 
this.socket.onmessage = (e: MessageEvent) => { 
    i++; 
    if (i % 100 === 0) { 
    console.log('recieved' + i); 
    } 
}; 

これは角度注射であるが、それは何と相互作用していないです。

100個のメッセージごとにコンソールに書き込みます。これはまだ100％のCPU使用率でブラウザを殺しますが、メッセージストリームを停止するまではほとんどの時間はコンソールに出力されません。その後、すべてがキャッチアップされ、数行の「受信したx00」メッセージが送信されます。

メッセージ自体はJSONであり、次のようになります。

{ 
    "Topic":"2a736d15-a2fe-43b2-8e8b-ee888f15a53a","Type":1, 
    "Message": { 
    "Value":2, 
    "Timestamp":"2017-06-05T14:46:21.615062+01:00" 
    } 
} 

は、彼らは典型的には約126文字です。

私はWebSocketを数十秒あたりのメッセージ数千のを扱うことができると仮定のだが、私はGoogleの上の任意の賢明な指標を見つけることができない、不合理なパフォーマンスのようなこのサウンドしていますか？

また、CPUプロファイラもチェックしました。 everthingのがロックアウトされた場合、それだけで通話の大きな壁だので、私は二つのメッセージにそれを断っ：（！一つ一つのメッセージのために起こります）これらのスパイクのいずれかにドリルダウン

：

私はこれらのいずれかの場所にブレークポイントを投げ、のWebSocketがトリガされますたび角度が何かをやっているように見える、それはゾーンとは何か（私はゼロの経験を持っている何か！）です：

スタックの最初のものは、ZoneTask.invokeです。 WebSocketを自身が、その後NgZoneがトリガされます、そして最終的には非常に高価な変更/更新のチェーンが呼び出される：

どのようにこのすべてが起こっされるだろうか？ websocketに加入している7行のコードは、Angularの変更検出権とは完全に独立していますか？彼らは、どのコンポーネントにもバインドされている値を変更していません。彼らの唯一のリンクは、彼らは、すぐに私は答えをうまく質問を投稿すると、@Injectable()

Answer 1

のSOD法の内部法に座っているです。私はそれを削除するだろうが、私はトピックに多くを見つけることができませんでしたので、誰かのために有用かもしれません。

これは、ゾーンの問題でした。ここにはuseful blog postがあります。私たちのハンドラが終了してからNgZoneサービスは（NgZoneゾーンをラップクラスがあるとき、角度2が知ってzone.jsをされて使用していること

理由：一般的には、2角度は、それの変化検出を駆動するためのゾーンを使用していますサービス）をApplicationRefに呼び出します。tick（）メソッド。 tick（）メソッドは、ツリーコンポーネントを上から下にスキャンし、各コンポーネントでテンプレートに存在する式を計算します。式の結果が以前の結果と等しくない場合（前のティックから）Angularは、この式に接続するDOMプロパティを更新します。

単に単独でメッセージのパフォーマンスを得るために簡単な解決策は、ゾーンの外で実行することですので、便利な方法runOutsideAngularとの角度変化の検出：この記事で

this.zone.runOutsideAngular(() => { 
    let i = 0; 
    this.socket.onmessage = (e: MessageEvent) => { 
    i++; 
    if (i % 100 === 0) { 
     console.log('recieved' + i); 
    } 
    }; 
});